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 に答える