如何添加加载标志，而ajax从其他PHP文件中获取数据，并将其返回到当前页面 - how to add loading sign while ajax fetches data from other php file named filter.php and return it to current page

how to add loading sign while ajax fetches data from other php file named filter.php and return it to current page

这是我的html文件，它调用Process函数的提交按钮的点击。我的问题是，当我调用进程函数，这是一个javascript函数刷新洞页，ajax既没有返回什么也没有#loadscreen显示任何

<head><script src="jquery-1.9.1.min.js"></script></head>
<form  name="myForm">
Category
        <select name="category">
            <option>..........</option>
            <option>.........</option>
            <option>.......</option>
            <option>......</option>
        </select>
        <br/><br/>

Experience      <br/>   
        <select name="experience">
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>......</option>

        </select>
        <br/><br/>
Location            
        <select name="location">
            <option>......</option>
            <option>......</option>
            <option>......</option>
            <option>.......</option>
            <option>........</option>
        </select>
<input type="submit" name="submit" value="Search" onclick="Process(); return false;">    </input>           
</form>
<div id="container" style="z-index: 1; width: 830px; height: 356px; position: absolute; top: 194px; left: 218px"></div>
<div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;">
<div id="loadScr" style="filter: alpha(opacity = 65);  z-index: 9999;border: medium        none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"></div>
<div id="loader"  style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; ">
<img src="busy.gif" alt="loading" />
</div>
</div>

下面是使用ajax的Process函数的代码和繁忙页面的代码

function Process( )
{
$('#loadScreen').show(function() {
var exp = document.forms['myForm']['experience'].value;
      var loc = document.forms['myForm']['location'].value;
      var cat = document.forms['myForm']['category'].value;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
        xmlhttp.onreadystatechange=function()
         {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
             {
                document.getElementById("container").innerHTML=xmlhttp.responseText;
             }
      }
    xmlhttp.open("GET","filter.php?experience="+ exp +"&location=" + loc + "&category=" + cat, true);
    xmlhttp.send();
});
}

不知道如何做到你有它的方式，但你可以使用JQuery库已经内置的功能。例如:

$.ajax({
   type: 'get',
   url: 'filter.php',
   data: {
      experience: exp,
      location: loc,
      category: cat
   }, 
   beforeSend: function() {
      //code to be executed while script is executing.
      $('#your_img_loader').fadeIn(500);
   },
   success: function(result) {
      //done executing hide loader
      $('#your_img_loader').hide();
      /* OTHER CODE */
   }
});

注意，如果你想在URL旁边传递GET参数，你也可以这样做:

url: 'filter.php?experience='+exp+'&location='+loc+'&category='+cat

和删除data: {}部分