几乎所有按钮按下都会在每次按下时创建多个ajax请求 [英] Almost all button press creates multi ajax request by every press

问题描述

我有一个问题，我的情况涉及每个页面都有一个ajax请求。我找到了一种方法，允许Java脚本能够在每个ajax请求的页面上运行，所以最近出于好奇我最近开始测试我的代码，看看是否有任何故障，所以我打开了chromes开发工具，看看



场景背后发生了什么，我发现了一些故障，所以当我每次请求时按下第1页按钮页面按下按钮的次数相同，这是正常的。但是，如果我在第2页上这样做，它会创建



多个ajax请求超过我按下按钮的数量。与第3页相同，我该如何解决这个问题。我基本上想要在每个请求的页面上允许java脚本我只是希望能够



防止多个ajax请求我希望能够显示相同数量的我每次都按下按钮。



这是一个.gif截图链接，向你们展示我的意思。



https://i.stack.imgur.com/hkYpT.gif





这是代码文件



** page_1.php **

I have a problem here i'm in a situation that involves every page having a ajax request. I found a way to allow Java Script to be able to run on each ajax requested page so

recently out of curiosity I started to test my code to see if there were any glitches so I opened up chromes developer tools to see what is happening behind the

scenes and I found some glitches so when I press page 1 button every time it request the page the same amount of times I press the button so that is normal. But if I do that on page 2 it creates

multiple ajax requests more than the amount I press the button. Same thing with page 3 so how can I resolve this. I basically want to allow java script on each requested page I just want to be able to

prevent the multiple ajax request I want to be able to show the same amount of times I press the button each time.

Here is a .gif screenshot link to show you guys what I mean.

https://i.stack.imgur.com/hkYpT.gif


Here is the code files

**page_1.php**

<script>
    
    document.addEventListener('DOMContentLoaded', function(){
    
    var execute_sendAjax1 = document.getElementById('executeAjax1');
      execute_sendAjax1.addEventListener('click', sendAjax1);
    
    function sendAjax1(){
    var xhr1= new XMLHttpRequest();
    
    xhr1.onreadystatechange = function(){
    	if(xhr1.readyState === 4){
    		document.getElementById('ajax1').innerHTML= xhr1.responseText;
    	
        /*<Allow JS on the requested page>*/	
            var exJs = document.getElementsByTagName('script');
            var enableAll = null;
            for (var i = 0; i < exJs.length; i++) {
                enableAll += exJs[i].innerHTML;
            }
            eval(enableAll);
        /*</Allow JS on the requested page>*/
    		
    	}
    }
    	xhr1.open('POST','page_2.php');
    	xhr1.send();
    }
    
    });
    
    </script>
    
    <button id='executeAjax1'>Execute 1</button>
    
    <h1>Page 1</h1>
    
    <div id='ajax1'></div>

** page_2。 php **

**page_2.php**

<script>
    
    var execute_sendAjax2 = document.getElementById('executeAjax2');
      execute_sendAjax2.addEventListener('click', sendAjax2);
      
    function sendAjax2(){
    var xhr2= new XMLHttpRequest();
    
    xhr2.onreadystatechange = function(){
    	if(xhr2.readyState === 4){
    		document.getElementById('ajax2').innerHTML= xhr2.responseText;
    	
    	/*<Allow JS on the requested page>*/	
            var exJs = document.getElementsByTagName('script');
            var enableAll = null;
            for (var i = 0; i < exJs.length; i++) {
                enableAll += exJs[i].innerHTML;
            }
            eval(enableAll);
        /*</Allow JS on the requested page>*/
    	
    	}
    }
    	xhr2.open('POST','page_3.php');
    	xhr2.send();
    }
    
    </script>
    
    <button id='executeAjax2'>Execute 2</button>
    
    <h1>Page 2</h1>
    
    <div id='ajax2'></div>

** page_3。 php **

**page_3.php**

<script>
    
    var execute_sendAjax3 = document.getElementById('executeAjax3');
      execute_sendAjax3.addEventListener('click', sendAjax3);
      
    function sendAjax3(){
    var xhr3= new XMLHttpRequest();
    
    xhr3.onreadystatechange = function(){
    	if(xhr3.readyState === 4){
    		document.getElementById('ajax3').innerHTML= xhr3.responseText;
    		
    	/*<Allow JS on the requested page>*/	
            var exJs = document.getElementsByTagName('script');
            var enableAll = null;
            for (var i = 0; i < exJs.length; i++) {
                enableAll += exJs[i].innerHTML;
            }
            eval(enableAll);
        /*</Allow JS on the requested page>*/
    		
    	}
    }
    	xhr3.open('POST','page_4.php');
    	xhr3.send();
    }
    
    </script>
    
    <button id='executeAjax3'>Execute 3</button>
    
    <h1>Page 3</h1>
    
    <div id='ajax3'></div>

** page_4.php **

**page_4.php**

<h1>Page 4</h1>

我尝试了什么：



谷歌搜索很长一段时间。我找不到我要找的答案所以我需要帮助。

What I have tried:

Googling for a long time. I can't find the answer that I am looking for so I need help on this.

推荐答案

使用chrome开发人员工具设置断点并查看事件的位置来自（哪里。他们只是不止一次开火的可能性很大。

Use chrome developer tools to set a breakpoint and see where the event is coming from. Odds are good that they are just firing more than once.

这篇关于几乎所有按钮按下都会在每次按下时创建多个ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！