如何显示弹出窗口以在使用纯 JavaScript 从 Web 服务器获取/请求数据时禁用搜索按钮

how to display popup to disable the search button while fetching/requesting data from the web server using Pure JavaScript?

本文关键字：获取 服务器 Web 请求 数据 按钮 搜索 JavaScript 显示 窗口 何显示      更新时间：2023-09-26

我有这个页面：

<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中。

一旦 ajax 请求完成，您需要稍微修改我们的 onreadystatechange 事件处理程序以隐藏您的 modalDialogdiv。

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

相关文章：