Question

在上图中，有一个页面上有20个用户的战场。我编写了JavaScript来捕获数据并将其存储在MySQL数据库中。当我需要点击下一页转到下一页并收集数据时，问题就出现了。

它使用Ajax调用获取接下来的20个用户。显然，当发生这种情况时，脚本无法记录新信息，因为页面永远不会加载到Ajax调用上，这意味着脚本不会执行。有没有办法在单击Ajax链接时强制页面加载？

以下是代码：

grabData（）; var nav = document.getElementsByClassName（'nav'）[0] .getElementsByTagName（'td'）[2] .getElementsByTagName（'a'）[0];

 nav.addEventListener("click", function(){
      grabData();
  });

  function grabData(){
      var rows = document.getElementsByClassName('table_lines battlefield')[0].rows;
      var sendData = '';

      for(i=1; i < rows.length -1 ; i++){
          var getSid = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].getElementsByTagName('a')[0].href; 
          var statsID = getSid.substr(getSid.indexOf("=") + 1); //Grabs ID out of stats link
          var name = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].textContent.replace(/\,/g,"");
          var tff = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[3].textContent.replace(/\,/g,"");
          var rank = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[6].textContent.replace(/\,/g,"");
          var alliance = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[1].textContent.trim();
          var gold = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[5].textContent.replace(/\,/g,"");

          if(alliance == ''){
              alliance = 'None';
          }

          if(gold == '??? Gold'){
              gold = 0;
          }else{
              gold = gold.replace(/[^\/\d]/g,'');
          }
          sendData += statsID + "=" + name + "=" + tff + "=" + rank + "=" + alliance + "=" + gold + "@";
      }
      $.ajax({
          // you can use post and get:
          type: "POST",
          // your url
          url: "url",
          // your arguments
          data: {sendData : sendData},
          // callback for a server message:
          success: function( msg ){
              //alert(msg);
          },
          // callback for a server error message or a ajax error
          error: function( msg )
          {
              alert( "Data was not saved: " + msg );
          }
      });
  }

如上所述，这会抓取信息并发送到后端的php文件。因此，当我在战场页面上点击下一步时，我需要能够再次执行此脚本。

更新：解决了问题。我可以通过在DOM树中向下钻取直到我点击“下一个”锚标记来完成此操作。我只是在点击它时添加了一个事件监听器并让它重新执行JavaScript。

Answer 1

是的，您可以强制加载页面：

window.location.reload(true);

然而，AJAX的重点是不重新加载页面，所以通常你必须编写javascript代码，复制最初构建页面的服务器端代码。

但是，如果页面加载代码讨论在页面加载的javascript中运行，那么您可以将其转换为函数并在AJAX成功函数中重新调用该函数。

参考：

How can I refresh a page with jQuery?

Javascript - 如何让脚本与Ajax请求的数据一起运行

1 个答案: