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函数添加另一个if语句。 “loading”的状态值（我认为你正在寻找）是'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...";
      }
  }

一次性改变div的内容两次

2 个答案: