`
wine-god
  • 浏览: 14223 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

(转)基于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);
  转载:http://www.cnblogs.com/zhuyidong/archive/2010/12/09/1901337.html
分享到:
评论

相关推荐

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

    在网页开发中,使用Ajax进行异步数据交互可以提供流畅的用户体验,但随之而来的问题是,当用户点击浏览器的刷新、后退或前进按钮时,由于页面没有整体刷新,Ajax请求加载的内容不会重新显示,导致浏览器的历史记录和...

    基于jQuery的Ajax聊天室程序

    【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用,它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页...

    浏览器调试ajax请求

    Ajax(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,极大地提升了用户体验。本示例旨在帮助开发者调试针对Ajax请求的后台接口,确保它们能够正确处理...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    基于jquery的ajax对话框

    "基于jQuery的ajax对话框"是一个利用jQuery实现的功能,它可以在不刷新整个页面的情况下,通过Ajax技术加载并显示新的内容在一个弹出的对话框里,提供了一种优雅的用户体验。 首先,让我们来了解jQuery的核心概念。...

    对ajax前进后退的处理

    然而,由于AJAX请求不会触发浏览器的前进和后退按钮(历史记录)更新,用户在使用这些功能时可能会遇到问题。本文将深入探讨如何处理AJAX前进后退的问题,主要涉及`hash`技术的应用。 `hash`是URL中的井号(#)后面的...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    通过以上步骤,我们可以成功构建一个基于jQuery Masonry插件和Ajax技术的瀑布流动态加载数据功能。这个功能不仅提高了页面的可读性和互动性,还能有效减少服务器负载,因为只有在需要时才会请求新数据。

    解决Ajax 发送多个请求引发的并发问题

    总结,解决Ajax并发问题的关键在于有效管理请求的顺序和并发度。通过理解这些问题的根源,我们可以选择合适的策略来优化和控制Ajax请求,以确保数据的准确性和用户体验的流畅性。在.Net环境下,开发者可以利用各种库...

    php基于jquery的ajax技术传递json数据简单实例.docx

    本文主要介绍了 PHP 基于 jQuery 的 Ajax 技术传递 JSON 数据方法,以完整实例形式分析了 PHP 基于 jQuery 的 Ajax 无刷新提交数据实现方法。下面是详细的知识点说明: HTML 页面 在 HTML 页面中,我们首先引入 ...

    解决ajax请求后台,有时收不到返回值的问题

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    为了阐述如何解决基于JQuery的$.ajax方法进行异步请求导致页面闪烁的问题,我们首先需要了解$.ajax的基本使用方法和影响页面渲染的因素。 $.ajax是JQuery提供的一个非常强大的方法,用于执行异步的HTTP(Ajax)请求...

    基于jquery实现的仿360浏览器猜你喜欢代码

    【基于jQuery实现的仿360浏览器猜你喜欢代码】是一个示例项目,它展示了如何使用JavaScript库jQuery来创建一个类似于360浏览器中"猜你喜欢"功能的效果。这个功能通常出现在网页的一侧,以悬浮的方式展示一系列推荐的...

    Java通过jQuery实现ajax异步请求

    本示例工程"Java通过jQuery实现ajax异步请求"着重展示了如何利用jQuery的AJAX功能与后端Java服务器进行数据通信,从而实现页面的无刷新更新。以下将详细解释这个过程中涉及的关键知识点。 首先,jQuery是一个强大的...

    jquery实现Ajax定时局部页面刷新

    为了解决这一问题,并提高用户体验,我们可以利用AJAX技术实现局部页面的自动刷新。通过这种方式,用户可以在无需操作的情况下实时接收到最新的数据更新。 #### 技术要点概述 本知识点将重点介绍如何使用jQuery库...

    基于jQuery的Ajax在线词典

    总的来说,这个基于jQuery的Ajax在线词典项目利用了Ajax技术实现了无刷新的单词查询功能,通过GETXML.PHP解决了跨域问题,使得用户能够在不离开当前页面的情况下获取和查看单词的详细信息。这种技术在现代Web应用中...

    基于Jquery.history解决ajax的前进后退问题

    本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考

    如何让浏览器支持jquery ajax load 前进、后退功能

    该API允许开发者在不进行页面刷新的情况下,更改浏览器地址栏中的URL,并能够添加、修改历史记录,实现无刷新前进和后退功能。 具体操作时,可以通过创建带有特定锚点的链接(如),当点击这些链接时,JavaScript会...

    jQuery+ajax实现三级级联

    6. **兼容性**:由于这个实例已经过专业测试人员的验证,并且声明兼容所有主流浏览器,这意味着开发者可能已经考虑到了跨浏览器的兼容性问题,可能使用了jQuery的`.noConflict()`模式,或处理了不同浏览器对CSS、DOM...

    基于Jquery和Ajax的多选框

    标题“基于Jquery和Ajax的多选框”暗示我们关注的是如何利用这两项技术来实现一个功能完善的多选框组件。这种组件通常用于用户需要从多个选项中选择一个或多个的情况,如设置偏好、选择服务等。 描述中提到,这个...

Global site tag (gtag.js) - Google Analytics