Question

我有一个网站，主页上有一个内容div，并且正在使用ajax切换内容。每当我在不同的页面之间切换时，ajax都会使请求量翻倍。这是处理页面切换的代码：

$(document).on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from

    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

现在可以说我切换到模板页面，其中显示创建的模板并让我创建模板。

现在，我第一次切换到此页面并创建一个新模板，一切都很好，在php上发布了一个帖子，在数据库中添加了一个新条目。现在，如果我在页面之间切换并返回到我的模板页面并创建一个新模板，仅这次ajax向php发送了两个帖子，并创建了2个数据库条目，现在，如果我再这样做一次，则有4个帖子发疯了，依此类推。

使用ajax的每个函数都会发生这种情况。当我不单独通过内容div进入主页时，不会发生这种情况，因此我怀疑切换页面的方式有些混乱。

编辑：它实际上不是加倍，而是每次添加一个请求。

更新我以某种方式修复了该问题，但不确定如何解决，但这是我所做的事情：我在函数中添加了.off('click','#sideNav a')，并将该函数放入单独的.js文件中。我觉得它每次都在重新加载脚本，再次不确定是否完全修复了该脚本，希望对您有所帮助。

Answer 1

作为解决方案，您可以在附加之前使用off()断开click事件（如果存在）：

$(document).off('click','#sideNav a').on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from
    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

IMO，导致此问题的原因来自您多次调用时多次发布的代码，该事件将再次附加，依此类推。

Answer 2

您的上述脚本可以正常工作。看看这个plunk：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Ajax request</h1>
    <div id="sideNav">
      <a href="https://jsonplaceholder.typicode.com/comments/1">Link 1</a>
      <a href="https://jsonplaceholder.typicode.com/comments/2">Link 2</a>
    </div>
    <div id="content">
      Some Content Goes Here
    </div>
  </body>
</html>

Javascript：

$(document).on('click', '#sideNav a', function(e) {
  e.preventDefault();
  var url = $(this).attr('href'); //get the link you want to load data from

  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      console.log(data)
      $("#content").empty();
      html = `<p><b>Name:</b> ${data.name}</p>
        <p><b>Email:</b> ${data.email}</p>
        <p><b>body:</b> ${data.body}</p>`
      $("#content").html(html);
    }
  });
  // window.history.pushState('object', 'New Title', url);
});

出于其他原因（可能会导致您的请求增加一倍）来检查此issue。

Ajax请求不断增加

2 个答案: