基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题

  需要使用的 jquery.history.js插件

  在巨人的肩膀之上,以下前进后退工作基于插件完成!

  做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求。

  换另外一个插件测试下,完美达到我的要求。

  总的思路,在url上加上参数,一切工作基于这个参数完成。

  

复制代码 代码如下:

  //截取传入字符串中第一次出现的需要的字符串。fieldName+tag 和endTag之间的内容

  function getQueryString(url,fieldName,tag,endTag){

  var urlString = url;//document.location.href;

  if(urlString != null){

  var typeQu = fieldName+tag;

  var urlEnd = urlString.indexOf(typeQu);

  if(urlEnd != -1){

  var paramsUrl = urlString.substring(urlEnd+typeQu.length);

  var isEnd = paramsUrl.indexOf(endTag);

  if(isEnd != -1){return paramsUrl.substring(0, isEnd);}

  else{return paramsUrl;}

  }

  else {return null;}

  }

  else{return null;}

  }

  //设置默认页面

  function setDefaultPage(){

  $("#contul ul").html("");

  $("#contul").hide();

  $("#cont").show();

  $("#top span").find("a").removeClass("active");

  $("#top span:eq(0)").find("a").addClass("active");

  }

  //检测最终字符

  function checkCode(getParme){

  if (getParme!=null){

  getParme=getParme.toUpperCase();

  var codeNum=getParme.charCodeAt(0)

  }

  if(codeNum>=65&&codeNum<=91){

  $("#top span").find("a").removeClass("active");

  //alert((codeNum-64));

  $("#top span:eq("+(codeNum-64)+")").find("a").addClass("active");

  //$("#cont").html("");

  $("#cont").hide();

  $("#contul").find("ul").html("");

  runAjaxGetCode(getParme);

  }else{

  setDefaultPage();

  }

  }

  //执行ajax操作

  function runAjaxGetCode(getParme){

  //$("#cont").fadeOut('fast',function(){

  $.ajax({

  cache:false,

  type:'get',

  url:'sxml/searchByWord'+getParme+'.xml',

  beforeSend:function(XMLHttpRequest){

  $('<div class="quick-alert">数据加载中,请稍后</div>')

  .insertBefore( $("#cont") )

  .fadeIn('slow');

  },

  success: function(data,textStatus){

  $("#contul").show().find("ul").html("");

  $(".quick-alert").fadeOut('slow', function(){

  $(this).remove();

  $("item",data).each(function(i, domEle){

  $("#contul ul").append("<li><a href='"+$(domEle).children("link").text()+"'>"+getParme+":"+$(domEle).children("title").text()+"</a></li>");

  if(($(this).index()-6)%6==0){

  $("#contul ul").append("<div class='clear'></div>");

  }

  });

  });

  },

  error: function(){

  alert("对不起,数据获取失败,请F5刷新页面重新尝试\如果问题仍然存在请联系网站管理员解决。");

  }

  });

  // });

  }

  //获取参数

  function getParmeter(){

  getParme=getQueryString(urlParem,'#javascript=tagCode("','','")');

  checkCode(getParme);

  }

  //getParmeter();

  //点击触发

  $("#top span:gt(0)").click(function(){

  $(".quick-alert").remove();

  });

  //初始化

  $.history.init(function(url) {

  //load(url == "" ? "1" : url);

  if(url.length>0){

  getParme=getQueryString(url,'javascript=tagCode("','','")');

  if (getParme!=null){

  getParme=getParme.toUpperCase();

  checkCode(getParme);

  }

  }

  else{

  setDefaultPage();

  }

  });

  //页面上其他操作

  var getParme;

  //function getHash(){

  //var curHash = location.hash;

  //alert(curHash);

  //}

  var urlParem;

  urlParem=document.location.href;

  var topHtml;

  var topHtmlLink="";

  var $_objTop;

  $_objTop=$("#top")

  topHtml=$_objTop.html();

  for(var i=65;i <91;i++)

  {

  topHtmlLink+="<span><a href='#javascript=tagCode(\""+(String.fromCharCode(i+32))+"\")'>"+String.fromCharCode(i)+"</a></span>";

  }

  $_objTop.html(topHtml+topHtmlLink);

  jquery.history.js插件 Demos

  Some demos are available here and included in the repository.

  And this site itself is built on the plugin:

  

复制代码 代码如下:

  (function($){

  var origContent = "";

  function loadContent(hash) {

  if(hash != "") {

  if(origContent == "") {

  origContent = $('#content').html();

  }

  $('#content').load(hash +".html",

  function(){ prettyPrint(); });

  } else if(origContent != "") {

  $('#content').html(origContent);

  }

  }

  $(document).ready(function() {

  $.history.init(loadContent);

  $('#navigation a').click(function(e) {

  var url = $(this).attr('href');

  url = url.replace(/^.*#/, '');

  $.history.load(url);

  return false;

  });

  });

  })(jQuery);