使用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() 。