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..."; 
     } 
    }