Ajax 请求不断翻倍答案

【问题标题】：Ajax requests keep doublingAjax 请求不断翻倍
【发布时间】：2018-11-29 23:20:26
【问题描述】：

我有一个网站，主页上有一个内容 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 文件中。我觉得它每次都在重新加载脚本，再次不确定到底是什么修复了它，希望它对某人有所帮助。

【问题讨论】：

听起来你一直在多次加载同一个脚本。我认为您的表现不足以解决问题，
@charlietfl 我也在想同样的事情，但似乎找不到任何暗示我继续加载相同脚本的东西，对不起，我只是不知道还能发布什么它更清晰。
内容模板中是否存在相同的脚本？
@charlietfl 我很确定这是问题所在，虽然我删除了一次脚本并尝试过，但问题仍然存在，但也许只是我很愚蠢，没有清除缓存或其他什么。跨度>

标签： javascript jquery ajax

【解决方案1】：

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

$(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 导致此问题的原因来自发布的代码，当您多次调用它时，每次调用它时，事件都会再次附加，依此类推。

【讨论】：

尝试使用 Ctrl+F5 清除缓存，它应该可以工作，请确保您没有在页面上多次呈现相同的脚本...

【解决方案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 以了解可能导致您的请求加倍的其他原因。

【讨论】：