ajax
来源:互联网 发布:数据库完整性约束 编辑:程序博客网 时间:2024/05/29 12:40
1.jquery方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax加载loading图标</title>
</head>
<body>
<form id="test-form" action="test.php" method="post">
<input type="text" name="username">
</form>
<button id="btn">提交</button>
<div id="loading"></div>
<div id="res"></div>
</body>
<script>
$('#btn').click(function(){
$.ajax({
url:$('#test-form').attr('action'), //发送后台的url
type:'post',
data:$('#test-form').serialize(), //序列化表单内容
dataType:'text', //后台返回的数据类型
timeout:15000, //超时时间
beforeSend:function(XMLHttpRequest){
$("#loading").html("<img src='./images/loading.gif' />"); //在后台返回success之前显示loading图标
},
success:function(data){ //data为后台返回的数据
$("#loading").empty(); //ajax返回成功,清除loading图标
$('#res').html('ajax请求成功!');
}
});
});
</script>
</html>
2.js方式
xmlhttp.onreadystatechange = function(){
var loadingdiv = document.getelementbyid("loading");
loadingdiv.innerhtml = "loading...";
loadingdiv.style.right = "0";
loadingdiv.style.top = "0";
loadingdiv.style.display = "block";
//load completed
if(xmlhttp.readystate == 4) {
loadingdiv.style.display = "none";
loadingdiv.innerhtml = "";
if(xmlhttp.status == 200) {
var str = xmlhttp.responsetext;
/* do something here ! */
}
else
alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);
}
}
- Ajax
- Ajax
- AJAX
- AJAX
- AJAX
- AJAX
- AJAX
- ajax
- ajax
- Ajax
- ajax
- ajax
- AJAX
- Ajax
- Ajax
- Ajax
- ajax
- ajax
- Android: Error generating final archive: Found duplicate file for APK: AndroidMainfest.xml问题
- VS2015+Opencv3.2+EasyPR下载EasyPR运行问题
- [LeetCode] Maximum Product Subarray 求最大子数组乘积
- Selenium3 自动化测试入门案列
- Qt / C++常见小问题汇总(二)
- ajax
- mysqldump与innobackupex备份过程你知多少(二)
- CodeForces 110A Nearly Lucky Number (近似幸运数字)
- 逻辑数据库设计
- 洛谷 P1058 立体图
- IntelliJ IDEA常用快捷键
- PHP连接MySQL实例实现增、删、改。
- 内联函数
- [复习]Dijkstra+堆/SPFA/Dijkstra+优先队列 浣花溪公园