每次點擊一個按鈕時加載相同的div

我一直在困擾如何將同一個div加載到同一頁面幾天。一直在尋找答案在stackoverflow但尚未找到一個。每次點擊一個按鈕時加載相同的div

簡化，這是到目前爲止我的代碼，

<script> 
    function add_fields() { 
     var xmlhttp; 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.open("POST", "add_more.php", false); 
     xmlhttp.send(); 

     document.getElementById("add_more1").innerHTML = xmlhttp.responseText; 
    } 
</script> 

<html> 
    <body> 
     <input type="button" onclick="add_fields()" value="ADD"/> 

     <div id="add_more1"></div> 
    </body> 
</html>

的問題是，當我點擊該按鈕，它只會加載add_more.php一次。我希望它每次點擊按鈕時都會加載。怎麼做？請幫忙。

來源

2015-03-02 user3513410

'XMLHttpRequest'是異步的。您需要用readystate事件來擴展您的請求。 – Mouser 2015-03-02 16:52:23

你正在做的是你正在替換div中的內容，因爲你正在使用'innerHTML = respone'。每次點擊「添加」按鈕時，您都會收到回覆。嘗試附加到div而不是替換它。也許嘗試使用'innerHTML + = respone'希望它有幫助！ @Mouser回答了它。 :) – sulavvr 2015-03-02 17:00:06

function add_fields() { 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //really no need for this anymore these days. 
    } 

xmlhttp.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200) //success 
    { 
     document.getElementById("add_more1").innerHTML=this.responseText; 
    } 
} 

    xmlhttp.open("POST","add_more.php",true); //set the sync to true, modern browsers will block a synchronous request. 
    xmlhttp.send(); 



}

這個更新的版本包含一個readystate事件，每當Ajax調用完成時就會填充你的div。

你使用的是XMLHttpRequest與asynchronous選項設置爲false。這可能會阻止用戶體驗，並且現代瀏覽器（如Firefox）會阻止此操作。

，如果你想更多的內容添加到div，使用

document.getElementById("add_more1").innerHTML += this.responseText;

+=將內容添加到元素，而不是替換它。它的縮寫：

document.getElementById("add_more1").innerHTML = document.getElementById("add_more1").innerHTML + this.responseText;

旁註：您正在使用POST（在這種情況下，GET會更好，因爲你只檢索信息）。如果要將發佈數據發送到服務器，則需要在send方法中將querystring（不包含?）作爲參數。

要繼續這一讀了異步編碼：

Easy to understand definition of "asynchronous event"?（很簡單的解釋）。
How does Asynchronous Javascript Execution happen? and when not to use return statement?（更全面）。

來源

2015-03-02 16:54:35 Mouser

我試過了..但是當按鈕被點擊時，什麼也沒有發生。我真的是ajax或javascript中的新手。 – user3513410 2015-03-02 17:03:07

@ user3513410現在的代碼應該可以工作。在我的環境中完美工作。你的控制檯說什麼（如果你不知道它在哪裏，使用瀏覽器中的F12鍵盤鍵來啓動它）。 – Mouser 2015-03-02 17:03:41

是的，代碼@Mouser應該工作。 – sulavvr 2015-03-02 17:05:27

每次點擊一個按鈕時加載相同的div

回答

相關問題