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

我正在一个完全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();
}

历史之后。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();
}

---

根据您在对问题的评论中提供的信息，这个问题似乎是由调用

finishAjax（）

引起的。我有，这应该能解决问题。更改如下:

• 从

  finishAjax（）

  的

  response

  参数中删除了字符串串联（

  “+escape（response）+”

  ）。 当与以下更改结合使用时，这种连接会导致转义字符串被单引号包围。当该参数稍后取消scape时，它也会尝试取消单引号的scape

理论上，您甚至不需要转义/取消转义

响应

变量，因为变量的值将被传递

• 从

  setTimeout（）

  中切换对finishAjax（）的调用，使其成为函数而不是字符串。这稍微有点效率，也可能使重构变得更容易（正如它将出现在IDE的“查找使用情况”功能中）

希望这有帮助

编辑：

$(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();
}

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

• 您在npm.js的第2行有一个未捕获的引用错误。 最好包括commonJS或requireJS commonJS，在包含npm.js之前，在HTML标题中。甚至 更好的方法是，看看如何使用Webpack将javascript编译成 单个包文件
  如果您以前没有使用过Webpack，请查看本教程：

• 您正在将一个对象作为GET参数传递给

  ajax.php

  ，在那里您需要传递一个字符串。您可以通过将

  History.Adapter.bind

  中的代码更改为以下内容来修复此问题。 （注意：我使用了一个代码段，因为带有代码标记和双/三回记号的代码格式都无法正常工作）

History.Adapter.bind（'window'，'statechange'，function（）{
var State=History.getState（）；
var数据=State.data；
$（“#主”）.fadeOut（）；
$.post（'/functions/ajax.php'，{id:data}，函数（响应）{
setTimeout（函数（）{
finishAjax（'main'，转义（response））；
ajaxifyLinks（）；
}), 400);
});
});根据您在对问题的评论中提供的提示，此问题似乎是由调用
finishAjax（）
引起的。我有，这应该能解决问题。更改如下:


从
finishAjax（）
的
response
参数中删除了字符串串联（
“+escape（response）+”
）。
当与以下更改结合使用时，这种连接会导致转义字符串被单引号包围。当该参数稍后取消scape时，它也会尝试取消单引号的scape

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


从
setTimeout（）
中切换对finishAjax（）的调用，使其成为函数而不是字符串。这稍微有点效率，也可能使重构变得更容易（正如它将出现在IDE的“查找使用情况”功能中）

希望这有帮助

编辑：

$(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();
}

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


您在npm.js的第2行有一个未捕获的引用错误。
最好包括commonJS或requireJS
commonJS，在包含npm.js之前，在HTML标题中。甚至
更好的方法是，看看如何使用Webpack将javascript编译成
单个包文件

如果您以前没有使用过Webpack，请查看本教程：

您正在将一个对象作为GET参数传递给
ajax.php
，在那里您需要传递一个字符串。您可以通过将
History.Adapter.bind
中的代码更改为以下内容来修复此问题。
（注意：我使用了一个代码段，因为带有代码标记和双/三回记号的代码格式都无法正常工作）



History.Adapter.bind（'window'，'statechange'，function（）{
var State=History.getState（）；
var数据=State.data；
$（“#主”）.fadeOut（）；
$.post（'/functions/ajax.php'，{id:data}，函数（响应）{
setTimeout（函数（）{
finishAjax（'main'，转义（response））；
ajaxifyLinks（）；
}), 400);
});
});对于任何对我如何做到这一点感兴趣的人，以下是代码：

$(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
中。这段代码中唯一的问题是，当您检查控制台的响应和id日志时，它被注册了两次。但是，当您回到历史中时，最后使用的页面被加载，而不是相同的页面

欢迎对代码进行任何更新/调整
 对于那些对我如何做到这一点感兴趣的人，下面是代码：

$(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
中。这段代码中唯一的问题是，当您检查控制台的响应和id日志时，它被注册了两次。但是，当您回到历史中时，最后使用的页面被加载，而不是相同的页面

欢迎对代码进行任何更新/调整
 这是p