如何添加加载标志,而ajax从其他PHP文件中获取数据,并将其返回到当前页面
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: {}
部分
相关文章:
- 使用jquery将mysql数据获取到新的表行中
- 使用createContainer将Meteor数据获取到React Native中时出现问题
- 创建按钮,根据表单字段中的数据获取特定的URL
- 将JSON API数据获取到html
- 将json数据获取到数组中
- 如何将具有多个标签的多个的所有数据获取到一个数组中
- 将状态的 URL 数据获取到模板中
- 如何在jquery中将xml解析数据获取为全局变量
- 在没有JQuery的情况下将JSON数据获取到TVML项目中
- Angular js如何将索引数据获取到另一个模板中
- 如何将PHP Post数据获取到jquery ajax请求中
- 使用javascript中.data()中存储的数据获取变量
- 无法将动态数据获取到 Jquery 饼图中
- 将节点.js neDB 数据获取到变量中
- 更新页面 JSON 数据获取下拉更改
- 将数据绑定到 kendo 下拉列表时,如何将 ajax 响应数据获取到变量
- 画布图像数据获取的值不超过 102,000 个
- 如何通过 JQuery JSON 数据获取 CheckBox(@Html.CheckBox) 的值
- 从html到jquery再到php,再从php到jquery到html,将数据传递到php文件并将数据获取到php文件中
- 如何将Jquery.get中的数据获取到Javascript中的一个变量中