带有history.pushState的AJAX

时间:2014-03-04 09:24:05

标签: javascript jquery ajax html5 history

我使用的是Firefox V26.0。 JavaScript将始终在所有链接上放置一个事件,以便在单击时进行ajax调用并异步加载页面。将加载的内容将是JSON字符串。它会解析字符串以获取所有信息(content,page_title和uri)。 之后我的脚本调用window.history.pushstate()来更改浏览器的历史记录。然后错误在源代码中。加载的json字符串将在Firefox V26.0的源代码中可见。 只有在我的AJAX-success-function中有window.history.pushstate()时才会出现这种情况。 所以可以肯定的是,问题不在于

$('#ajax_load').html(obj.content);

因为如果此行将被注释掉,也会发生错误。只有在我使用pushState()

时才会在源代码中看到加载的JSON

我真的不知道为什么会这样。

这是完整的代码。我只将此脚本与jQuery结合使用,因此没有其他脚本可以影响问题

// In combination with jquery-1.9.1.min.js
$(document).ready(function(){
    $('body').addClass('js');
    $.ajaxLoad = function(href, popstate){
        popstate = typeof popstate !== 'undefined' ? popstate : true;
            $.ajax({
                type: 'GET',
                url: href,
                async: false,
                success: function(json){
                    var obj = JSON && JSON.parse(json) || $.parseJSON(json);
                    /**
                        obj will look like
                        {
                            content   : "content",
                            page_title: "Title of Page",
                            uri       : "/path/to/appliction/"
                        }
                    */
                    $('#ajax_load').html(obj.content);
                    if(popstate == true){
                        window.history.pushState({}, obj.page_title, obj.uri);
                    }
                    document.title = obj.page_title;
                    return false;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    console.log(XMLHttpRequest);
                    return false;
                }
            }); 
    }
    $(document).on("click", 'a:not(".noAjaxLoad")', function(e){
        e.preventDefault();
        $.ajaxLoad($(this).attr("href"), true);
    });
});

2 个答案:

答案 0 :(得分:0)

如果您只尝试使用该怎么办?

var obj = $.parseJSON(json);

答案 1 :(得分:0)

听起来您正在使用pushState将URI设置为JSON数据的URI。

您需要将其设置为要将原始页面转换为的页面的URI(使用从JSON获取的数据)。

如果您还没有,那么您需要创建该页面(可能通过复制客户端JS正在使用服务器端代码进行的工作)。