0

我目前有一个值为“提交”的按钮。我希望此文本在单击后立即更改为“提交”。目前，我有这个：

<input type="button" id=btnSub name="submitToeNICQ"  value="Submit" onclick="do_submission()">
<div id="results"> No submission has been performed yet</>
<script>  
function do_submission()
{
    var elem = document.getElementById("btnSub");
    elem.value="Submitting";
    var xhReq = new XMLHttpRequest();
    var request = "main.php?pid=21&submiteNICQ=yes " 
    xhReq.open("GET", request, false);  // send a request
    xhReq.send(null);
    document.getElementByID("results").innerHTML=xhReq.responseText;
}
</script>

我希望在处理 XMLHttpRequest 之前更改文本，以便用户立即进行更改。上面的代码似乎只在整个请求完成后才更改按钮文本（通常在按钮按下后大约 3 秒）。

有人对此有解决方案吗？

4

1 回答 1

2

不要执行同步 AJAX 请求。它们专门用于异步请求：

function do_submission()
{
    var elem = document.getElementById("btnSub");
    elem.value="Submitting";
    var xhReq = new XMLHttpRequest();
    var request = "main.php?pid=21&submiteNICQ=yes " 

    // Removed third parameter (it's now 'true' by default)
    xhReq.open("GET", request);

    // Added callback function for handling different states
    xhReq.onreadystatechange = function () {
      if (xhReq.status == 200 && xhReq.readyState == 4) {
        document.getElementByID("results").innerHTML=xhReq.responseText;
      }  
    }; 
    xhReq.send(null);

}

您当前的代码会等待请求完成，然后才能更新任何 UI 部分。

上面的代码异步触发请求，因此函数将在请求完成之前结束，浏览器有时间更新 UI。

jQuery：

function do_submission()
{
    $("#btnSub").val("Submitting");

    $.get("main.php?pid=21&submiteNICQ=yes", function (data) {
      $("#results").html(data);
    });
}
于 2013-10-06T14:08:47.260 回答