提交按鈕（阿賈克斯）只能使用一次

這裏是我的簡單的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

提交按鈕（阿賈克斯）只能使用一次

回答

相關問題