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);
    });
}

Javascript按钮文本在处理之前更改

1 个答案: