Question

这段代码工作正常，我想要的只是让ajax说请等待，同时仍然要求提供信息：这是这段代码。

function products(){  

   if (document.getElementById('date').value.length == 0) {
     alert("Please Pick Date");
     document.getElementById('date').focus();
     return false;
   }

   var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('sum');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var usr = document.getElementById('usr').value;
    var date = document.getElementById('date').value;
    var queryString = "?usr=" + usr + "&date=" + date;
    ajaxRequest.open("GET", "ajax_prom.php" + queryString, true);
    ajaxRequest.send(null); 

}

Answer 1

In your page, add a div with the id - divAjaxRequestInProgress. Add the text you want to show while the ajax request is in progress to this div. You could have an animated gif as well. Now, show this when you start your ajax processing and hide it once the request is complete. 


function products(){  

   if (document.getElementById('date').value.length == 0) {
     alert("Please Pick Date");
     document.getElementById('date').focus();
     return false;
   }

   $("#divAjaxRequestInProgress").show();

   var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('sum');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
        $("#divAjaxRequestInProgress").hide();
    }
    var usr = document.getElementById('usr').value;
    var date = document.getElementById('date').value;
    var queryString = "?usr=" + usr + "&date=" + date;
    ajaxRequest.open("GET", "ajax_prom.php" + queryString, true);
    ajaxRequest.send(null); 

}

我刚刚为你的代码添加了2行 - 一行显示，一行隐藏div。

如何显示请等待ajax请求过程完成

1 个答案: