在编写前台页面代码时,经常会用到 异步请求 这样的技术,就是保持本页主要内容不变,进行局部刷新的技术,在网站开发项目中也是非常常见的,比如登陆功能,我们在大部分网站进行登陆的时候,登陆框只占整个页面的一小部分,我们在验证账号密码提交数据与数据库进行交互的时候,运用异步请求技术可以实现既不跳转页面又能实现与后台数据库的交互与前台的提示功能。
因为ajax是jQuery的技术,所以我们在使用ajax前要先引入jQuery的js文件。
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
最新的jQuery文件可以到官网下载:
在进行java开发时Ajax的几种常用用法:
1. $.ajax({})
$.ajax({
url:"login.do", //请求地址
type:"post", //请求方式
dataType:"json", //返回数据类型
data:{pid:pid}, //要发送的数据
success:function (obj){ //执行成功后的回调函数
if(obj){
alert("登录成功");
}else{
alert("账号或密码错误");
}
}
});
这种格式参数之间位置可互换,除url外不必要的参数可以省略,例如不用传值就省略data参数。
2. $.post({})
$.post(url, [date], [callback], [type])//[可省略参数]
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default
例:
// 请求地址 传参 回调函数
$.post("login.do", {uname:uname, pwd:pwd}, function (obj){
if(obj){
alert("登录成功");
}else{
alert("账号或密码错误");
}
});
这种格式默认请求方式为post参数之间位置不可互换,除url外不必要的参数也可省略。
3. $.get({})
Get与post的格式一致
$.post(url, [date], [callback], [type])//[可省略参数]
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default
请求方式为post各参数位置固定不可互换,除url外不必要的参数也可省略。
4. serialize() 序列化表数据为json字符串
当我们在进行ajax传值时一个form表单中所有数据可能有很多,书写很麻烦,那么可以用序列化来进行传值:
例如:以上post例子中就可以写成
$.post("login.do", $("form").serialize(), function (obj){
if(obj){
alert("登录成功");
}else{
alert("账号或密码错误");
}
});