Javascript : 显示加载图像 gif 并冻结网页，直到收到 xmlhttpRequest 响应

Question

我想在按下 get score 按钮后从服务器收到响应之前显示加载中的 gif。我正在使用烧瓶并使用以下代码来获取和 post 请求。我还想冻结网页，直到响应显示在结果字段中。

JavaScript代码：

function pushDatatoServer(){
    baseURL = 'localhost'
    port = app_port
    endpoint = '/push'
    url = 'http://'+baseURL+':'+port+endpoint
    console.log(url)
    xhttp = new XMLHttpRequest()
    xhttp.open("POST",url , true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("secretKey", "xSecretx");
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState === 4 && xhttp.status === 200){
            var res = JSON.parse(xhttp.responseText);
            console.log(res)
            document.getElementById("final_result").innerHTML = res['riskScore'];
            //var maxval = 100;
            //var minval = 0;
            //var moreisgood = false;
            //var col = rgbify(maxval, minval, val, moreisgood)
            var score = res['riskScore'];
            if(score >= 0 && score <= 30 ){
                    var val = rgb(152,209,84);
                }
                else if (score >= 30 && score <=70){

                    var val =  rgb(253,179,74);
                }
                else  {
                    var val = rgb(255,107,107);
                }

            $("#final_result").css("background-color", val);
        }
    }
    console.log(currentState)
    xhttp.send(JSON.stringify(currentState));
 }

HTML 按钮代码：

 <div class="endspan1"  align="right">
     <input type="button" class=" button1" value="Get Score" onclick="pushDatatoServer()"  id="pushDatatoServer">      
 </div>

结果字段HTML代码：

 <span  type="text" class="resultField"  id="final_result" readonly ></span

Answer 1

您可以在 body 上使用 pointer-events: none; overflow: hidden; 或覆盖具有完整视口大小的透明 div。但是要捕获并处理错误（错误的请求、超时......等等），否则你的网站将无法正常工作。

这是对用户体验非常大的侵犯！

Answer 2

如果您想以某种方式阻止用户在请求完成之前进行任何交互，您可以使用不可见的方式阻止整个页面 div。

基本上，您会生成具有更高 z-index 和透明背景的不可见元素。当你想再次启用你的页面时，你只需隐藏块元素。

function blockPage() {
  $("#block-element").show();
  alert("i was blocked and i cant be clicked again");
}

function unblockPage() {
  $("#block-element").hide();
}

#block-element {
  position: absolute;
  z-index: 999999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: none;
}

<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="blockPage()">block me</button>

<div id="block-element">
</div>
</body>
</html>

Javascript : 显示加载图像 gif 并冻结网页，直到收到 xmlhttpRequest 响应

Javascript : show load image gif and freeze webpage until xmlhttpRequest responce is received

html

javascript

ajax

loading