使用Pure JavaScript從Web服務器獲取/請求數據時，如何顯示彈出窗口以禁用搜索按鈕？

Question

我有這個頁面：

<div>
    <label id="lblchecked"></label>
    <input id="ipt_search" type="search" title="Search" />
    <button id="btn_search" onclick="loadXMLDoc();"> Search</button>
</div>
<div id="response">
    <table id="tbl"></table>
</div>    

<div id="openModal" class="modalDialog" style="display:none;">
    <div>
        <h2>Please wait .......... </h2>
    </div>
</div>

在.js文件中，我從服務器獲取數據為：

function loadXMLDoc() {
    document.getElementById("openModal").style.display = "block";
    var Searchtxt=   document.getElementById("ipt_search").value;
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var myArr = JSON.parse(xhttp.responseText);
            myFunction(myArr);
        }
    };
    xhttp.open("GET", "https://test.com/"+Searchtxt, true);

    xhttp.send();
}

我要在獲取服務器數據時使openModel彈出並在數據加載后再次將其關閉。

在原始JavaScript中。

Answer 1

您需要稍微修改我們的onreadystatechange事件處理程序，以在ajax請求完成后隱藏您的modalDialog div。

function loadXMLDoc() {
    var openModal = document.getElementById("openModal")
    var Searchtxt = document.getElementById("ipt_search").value;

    // show modal
    openModal.style.display = "block";

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (xhttp.readyState === 4) {

            // http request completed

            if (xhttp.status === 200) {

                // successful

                var myArr = JSON.parse(xhttp.responseText);
                myFunction(myArr);
            }

            // hide modal, successful or not

            openModal.style.display = 'none';
        }
    };

    xhttp.open("GET", "https://test.com/"+Searchtxt, true);
    xhttp.send();
};

此示例將在請求完成后關閉modalDialog ，但僅在請求成功后才調用myFunction() 。