基于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);
   
   

 

 最终请参阅演示地址：点击这里  转载请注明出处。