提交按钮（阿贾克斯）只能使用一次

这里是我的简单的HTML表单& JS：提交按钮（阿贾克斯）只能使用一次

<body> 
    <form> 
     <label for="usrtext">Enter text here:</label> 
     <br /> 
     <textarea name="usrtext" id="usrtext" rows="25" cols="100"></textarea> 
     <br /> 
     <button id="btn" type="button">Send</button>  
    </form> 
    <script type="text/javascript"> 
     document.getElementById('btn').onclick = request; 

     function request() 
     { 
      var xhr = new XMLHttpRequest(); 

      var usrtext = document.getElementById("usrtext").value; 

      xhr.open("GET", "sampleb.php?usrtext="+usrtext, true); 

      xhr.onreadystatechange = function(aEvt) 
      { 
       if (xhr.readyState == 4) 
       { 
        if (xhr.status == 200) 
        { 
         var temptxt = document.body.innerHTML; 
         document.body.innerHTML = temptxt + xhr.responseText; 
        } 
       } 
      } 

      xhr.send(''); 
     } 
    </script> 
</body>

这里的PHP页面（sampleb.php）：

<?php 

if (isset($_REQUEST["usrtext"])) 
{ 
    $output = $_REQUEST["usrtext"]; 
} 

echo $output; 
?>

我遇到的问题是当你在文本框中输入文本并提交时，php页面会获取文本并将其正确地发回。但这只是第一次。如果我在文本框中输入新文本并单击提交按钮，则ajax调用似乎不再有效。

我对此很新，但是我用console.log替换了'request'，如果我多次单击该按钮，它将在Firebug中注册。我也用一个annon函数取代了'request'，这个函数带来了一个警告框，并且在多个按钮点击时工作......我只是不知道为什么我的'request（）'函数没有被第二次调用。

来源

2011-01-07 Brownbay

您正在替换ajax回调中的整个文档正文。这意味着您注册的点击事件也会丢失。您必须重新注册该活动。

当你

var temptxt = document.body.innerHTML; 
document.body.innerHTML = temptxt + xhr.responseText;

它将用新的DOM树将整个文档的身体，这将导致脚本和以及DOM的形式与新的DOM树进行更换。

其实你想在ajax请求结束时做什么。我不明白为什么你必须更换文档的整个主体。

来源

2011-01-07 06:23:43

啊，我现在明白了。那么，为了确认，当没有新的页面加载的情况下创建新的DOM树时，浏览器不会再次执行HTML和JS？ – Brownbay 2011-01-07 06:34:58

提交按钮（阿贾克斯）只能使用一次

回答

相关问题