javascript - 使用History.js存储数据，然后使用数据进行页面的ajax加载

Question

我正在开发一个完全ajaxified 的网站。下面是ajax加载页面的代码。我试图在这段代码中使用history.js，但是合并代码后，它只改变了url，但没有改变内容。我想做的是，当状态发生变化时，将数据存储在状态中，然后使用ajax加载页面。

在history.js之前:

$(document).ready(function(){
    $(".navButton").click(function() {
        $("#main").fadeOut();
        var a = $(this).attr('id');
        $.post('functions/ajax.php?id='+a, {}, function(response){
            //$('#container').html(unescape(response));
            ///$('#container').fadeIn();
            setTimeout("finishAjax('main', '"+escape(response)+"')", 400);
        });
    });
});
function finishAjax(id, response){
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}

在history.js之后:

$(function() {
    ajaxifyLinks();
    $(".navButton").click(function() {
        $("#main").fadeOut();
        var a = $(this).attr('id');
        $.post('functions/ajax.php?id='+a, {}, function(response){
            //$('#container').html(unescape(response));
            ///$('#container').fadeIn();
            setTimeout("finishAjax('main', '"+escape(response)+"')", 400);
        });
    });
});
function ajaxifyLinks() {
    $(".navButton").click(function() {
        var a = $(this).attr('id');
        var name = $(this).attr('name');
        History.pushState(a, document.title, '?action='+name);
        return false;
    });
}
History.Adapter.bind(window,'statechange',function() {
    var State = History.getState();
    var data = State.data;
    $("#main").fadeOut();
    $.post('functions/ajax.php?id='+data, {}, function(response){
        //$('#container').html(unescape(response));
        ///$('#container').fadeIn();
        setTimeout("finishAjax('main', '"+escape(response)+"')", 400);
    });
    ajaxifyLinks();
});
function finishAjax(id, response){
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
}

Answer 1

根据您在问题评论中提供的 fiddle ，此问题似乎是由调用 finishAjax() 引起的。我有updated your fiddle with some minor changes ，这应该可以解决问题。变化如下:

• 从 finishAjax() 的 response 参数中删除了字符串连接 ('"+escape(response)+"' )。此连接与以下更改结合使用时，会导致转义字符串被单引号括起来。当参数稍后取消转义时，它也会尝试取消单引号。

理论上，您甚至不需要转义/取消转义 response 变量，因为变量的值将被传递。

• 从 setTimeout() 内部切换对 finishAjax() 的调用，使其成为一个函数，而不是一个字符串。这稍微更高效，并且还可能使重构变得更加容易(因为它将出现在 IDE 的“查找用法”功能中)。

希望这有帮助!

编辑:

您的代码还存在一些其他问题，即:

• npm.js 第 2 行有一个 Uncaught ReferenceError 。您需要包含 commonJS 或 requireJS，最好是commonJS，在 HTML 的 header 中，在包含 npm.js 之前。甚至更好，看看使用 Webpack，将你的 javascript 编译成单个捆绑文件。

  如果您之前没有使用过 Webpack，请看一下本教程:https://github.com/AriaFallah/WebpackTutorial

• 您将一个对象作为GET参数传递给ajax.php，您需要在其中传递一个字符串。您可以通过将 History.Adapter.bind 中的代码更改为以下内容来解决此问题。(注意:我使用了一个片段，因为使用代码标记和双/三反引号的代码格式无法正常工作)

History.Adapter.bind('window', 'statechange', function() {
 var State = History.getState();
 var data  = State.data;
 $("#main").fadeOut();

 $.post('/functions/ajax.php', { id: data }, function(response) {
   setTimeout(function() {
      finishAjax('main', escape(response);
      ajaxifyLinks();
    }), 400);
 });
});

我还注意到，有时 ajaxifyLinks() 函数会在执行 finishAjax() 之前被调用，因为代码不是从 setTimeout() 内调用的。我稍微调整了一下结构来解决这个问题。

除此之外，经检查，您的 State.data 对象实际上是一个空对象，如下所示。您可能想要在 State 对象中使用不同的属性，或者确保将所需的数据添加到 State.data。

我强烈建议您查看 Firebug(如果您使用 Firefox)或 Chrome 开发者控制台(如果您使用 Chrome)。您可以向要检查的代码添加断点，当您与站点交互时，它将在遇到该断点时停止执行，从而允许您查看每个变量的值等(如上所述)。

此外，这使得其中一些问题很容易被发现。例如，下图显示了我如何发现参数问题。请注意，红色方 block 中的 id 为 [object%20object] (%20 是 URI 编码'space')，而蓝色的是数字 ID:

希望这有帮助。