0

我正在做一个简单的 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>
4

2 回答 2

2

您当前正在使用：

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 请求的执行。我建议您在使用图书馆之前了解幕后发生的事情，以便您能够完全理解一切。这将有助于鼓励更积极的行为和倾向。

于 2012-07-13T16:12:16.063 回答
1

尝试向 onreadystatechange 函数添加另一个 if 语句。“加载”的状态值（我认为您正在寻找）是“1”。以此作参考：桃坑。基本上，您希望使它看起来像这样：

  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...";
      }
  }
于 2012-07-13T16:07:24.387 回答