javascript - 在 JavaScript 中通过 AJAX 获取值后进度条不隐藏

Question

我正在使用在线网络服务来获取特定货币的汇率。当用户更改下拉索引时，我向用户显示一个进度条，并且在同一个下拉菜单 Onchange 上，我调用网络服务来获取最新费率。一切工作正常，但问题出在进度条上。从网络服务获取值后，它不会被隐藏。我调用进度条并从 webservice 获取值的代码如下:

<script type="text/javascript">
    function GetBalanceQty(val) {
        //in val u get dropdown list selected value
        var id = val;
        ShowProgress();//Calling Progress Bar
        var xmlhttp = new XMLHttpRequest();
        var url = "https://openexchangerates.org/api/latest.json?app_id=324d066072324a7fba34618f5c5dfd83";
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                myFunction(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        function myFunction(response) {
            var currencyData = JSON.parse(response);
            var i;
            if (!currencyData.rates) {
                // possibly handle error condition with unrecognized JSON response
                alert("currency data not found!");
            }
            // id variable is available from outer function
            if (id in currencyData.rates) {
                var x = document.getElementById('<%= txtAmount.ClientID %>').value / currencyData.rates[id];
                document.getElementById('<%= lblValue.ClientID %>').value = Number((x).toFixed(2));
                document.getElementById('<%= lblDispValue.ClientID %>').innerHTML ='USD$ '+ Number((x).toFixed(2));
            } else {
                alert("unknown currency code!");
            }
        }
    }
</script> 

我的ProgressBar代码是这样的:

 <!--Progress Bar-->

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }

    function changes() {
       // ShowProgress();
    }
</script>
<!--Progress Bar-->

进度条是这样的:

<!--Progress Bar-->
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="../images/loader.gif" alt="" />
</div>
<!--Progress Bar-->    

Answer 1

一旦收到 ajax 调用的响应，您需要隐藏进度条。像这样的事情会做:

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          setTimeout(function(){$(".loading").hide()}, 200); // you can write a hideProgressBar() function to achieve this. Added a timeout to make sure the progress bar is already shown;
          myFunction(xmlhttp.responseText);
    }
}