Javascript: показывать изображение загрузки gif и останавливать веб-страницу до получения ответа xmlhttpRequest - PullRequest
Новая
       6

Javascript: показывать изображение загрузки gif и останавливать веб-страницу до получения ответа xmlhttpRequest

0 голосов
/ 19 октября 2018

Я хочу показать загрузочный GIF, пока не получу ответ от сервера после нажатия кнопки get Score .Я использую флягу и использовал следующий код, чтобы получить и опубликовать запрос.Я также хочу заморозить веб-страницу до тех пор, пока ответ не отобразится в поле результатов.

Код 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

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Если вы хотите как-то запретить пользователю какие-либо взаимодействия до завершения запроса, вы можете заблокировать всю страницу с помощью невидимого элемента div.

По сути, вы создаете невидимый элемент с более высоким z-индексом и прозрачным фоном.Если вы хотите снова включить свою страницу, просто скрываете элемент блока. 

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>
0 голосов
/ 19 октября 2018

Вы можете использовать pointer-events: none; overflow: hidden; на своем теле или наложить прозрачный div с полным размером области просмотра.Но отлавливайте и обрабатывайте ошибки (неверный запрос, тайм-аут .... что угодно), иначе ваш веб-сайт больше не будет работать.

Это очень большое вторжение в пользовательский опыт!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...