处理前更改Javascript按钮文本

Question

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

<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秒钟左右）。

有人对此有解决方案吗？

Answer 1

不要执行同步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);
    });
}