Question

我正在做一個簡單的ajax調用，它工作正常。但是，響應速度很慢，我不希望用戶在點擊兩次後認爲它不起作用。因此，我想在收到回覆之前顯示一條消息，如「正在轉換請稍候」。這裏是我已經試過代碼：

function postajax() 
{ 
    document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait..."; 

    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.onreadystatechange = function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      document.getElementById("links").innerHTML=xmlhttp.responseText; 
    } 

    var links = window.document.getElementById('linksarea').value; 

    xmlhttp.open("POST","ajax.php",true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send("links="+links+"&username=xxxx"); 
} 

下面是HTML部分大公我試圖修改

<div id="memberright"> 
    Convert the links here<br /> 
    <textarea name="links" id="linksarea" cols="65" rows="10"></textarea><br /> 
    <input type="button" id="buttonr" onclick="postajax()" value="Convert"> 
</div> 

<div id="ajax"> 
    <div id="links"> 
    </div> 
</div> 

Answer 1

您正在用：

document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> 
    Converting please wait..."; 

應設置innerHTML到加載圖像和顯示加載信息。在稍後的時候，你正在服用該元素的值：

window.document.getElementById('linksarea').value; 

的value屬性只能在一個輸入，它不會有innerHTML存在。

嘗試以下，假設#links是你想修改的元素，它根據你的問題的標題，你正在試圖改變div元素的值的兩倍：

document.getElementById("links").innerHTML = "<img src='images/waiting.gif'> 
     Converting please wait..."; 

// or if you have another div with an ID of `linksarea` 

document.getElementById("linksarea").innerHTML = "<img src='images/waiting.gif'> 
     Converting please wait..."; 

我可能是完全錯誤沒有看到你的HTML，但看起來好像這可能是你的問題。您需要確保您正在嘗試修改正確的元素。

更新：

使用jQuery：

function postajax(){ 
    $('#links').html("<img src='images/waiting.gif'> Converting please wait..."); 

    var params = "links=" + $('#linksarea').val() + "&username=xxxx"; 

    $.ajax({ 
     url: "ajax.php", 
     type: "POST", 
     data: params, 
     success: function(result){ 
      $('#links').html(result) 
     } 
    }); 
} 

作爲證明，jQuery的極大簡化執行與$.ajax()功能AJAX請求。我建議你在使用圖書館之前瞭解幕後發生的事情，以便你能夠充分理解事物。這將有助於鼓勵更積極的行爲和傾向。

Answer 2

嘗試，如果語句的onreadystatechange的功能附加另一個。 「加載」的狀態值（我認爲你正在尋找的）是'1'。請將此用於參考：peach pit。基本上，你正在尋找，使它看起來像這樣：

xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("links").innerHTML=xmlhttp.responseText; 
     } 
     else if (xmlhttp.readyState==1 && xmlhttp.status==200) 
     { 
     document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait..."; 
     } 
    }