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

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

从'"+escape(response)+"'的{{1}}参数中删除了字符串连接（response）。当与以下更改结合使用时，此连接将导致转义字符串被单引号括起。当参数稍后未转义时，它也试图取消单引号。

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

从response内切换到finishAjax（）的调用，使其成为函数，而不是字符串。这样稍微更有效，并且还可以使重构变得更容易（因为它将出现在IDE的“查找用法”功能中）。

希望这有帮助！

修改

您的代码还有一些其他问题，即：

你在npm.js的第2行有一个未被捕获的引用错误。 您需要包含commonJS或requireJS，最好是在包含npm.js之前，在HTML的标题中使用commonJS。甚至更好的，看一下使用Webpack，将你的javascript编译成一个捆绑文件。

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

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

History.Adapter.bind

我还注意到，有时ajaxifyLinks（）函数在执行 finishAjax（）之前被称为，因为代码没有在setTimeout（）中调用。我稍微重组了一下以解决这个问题。

除此之外，经检查，您的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); }); });对象实际上是一个空对象，如下所示。您可能希望在State.data对象中使用其他属性，或者确保将所需数据添加到State。

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

此外，它使一些问题很容易被发现。例如，下图显示了我如何找到参数问题。请注意，在红色方块中，id为State.data（[object%20object]是URI编码 'space'），而在蓝色中它是一个数字id：

希望这有帮助。

Answer 2

对于任何有兴趣的人如何设法做到这一点，这里是代码：

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

function ajaxifyLinks() {
       $(".navButton").click(function() {
          var a = $(this).attr('id');
          var name = $(this).attr('name');
          History.pushState({data : a}, document.title, '?action='+name);
          return false;
  });
}

$(window).on('popstate', function () {
       $("#main").fadeOut();
       d = History.getState();
       $.post('../functions/ajax.php?id='+d.data.data, {}, function(response){
         setTimeout(finishAjax('main', escape(response)), 400);
   });
});

function finishAjax(id, response) {
     $('#'+id).html(unescape(response));
     $('#'+id).fadeIn();
     console.log(response);
     console.log(id);
}

我在popstate函数中使用了console.log来检查数据是否存储。我发现它存储在data.data中。此代码中唯一的问题是，当您检查控制台的响应和＆amp; id日志，它被注册两次。但是当您回到历史记录中时，最后使用的页面会被加载而不一样。

感谢代码中的任何更新/调整!!

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

2 个答案: