ajax是web开发中常用到的一个功能,全名为Asynchronous JavaScript And XML,他可以想后台发送数据,常用的方法有get和post。我就以提交表单为例子来讲解一下ajax的使用(我用到的是jquery库封装的 ajax)。
html5表单代码:
<form id="loginForm" name="loginForm">
<table>
<tr>
<td><div align="right" >User Name</div></td>
<td><input type="text"name="username"></td>
</tr>
<tr>
<td><div align="right">Password</div></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="button" id="btn1" name="submit" value="submit"></td>
<td><input type="reset" id="btn2" name="reset" value="reset"></td>
</tr>
</table>
</form>
上面的是我写的html5代码。但是请看好,我的提交按钮设置的是button类型,如果正常按表单提交类型应为submit。
因此,我需要先触发按钮事件,然后执行ajax方法
这是我的ajax提交按钮事件:
$('#btn1').click(function(){
$.ajax({
cache:true,//保留缓存数据
type:"POST",//为post请求
url:"FormTest",//这是我在后台接受数据的文件名
data:$('#loginForm').serialize(),//将该表单序列化
async:false,//设置成true,这标志着在请求开始后,其他代码依然能够执行。如果把这个选项设置成false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死
error:function(request){//请求失败之后的操作
return;
},
success:function(data){//请求成功之后的操作
console.log("success");
}
});
})