1.ajax请求的4种方法:
jquery回调函数里面的data是json格式,所以传值的时候必须传json格式 response.getWriter().print(dataArr.toJSONString());
1.1: load方法,用于load服务器的文件
如下:
$(\'input:first\').click(function (){
$(\'#load\').load("form_01.html #checkBox");//url
});
//上述方法是加载了form_01.html中的 #checkBox部分到当前页面中的#load中
$(\'input[type=button]\').click(function(){
var send={\'userName\':$(\'#userName\').val()};//设置需要传入服务器的参数json格式
$(\'#load\').load(\'test!checkName\',send,function(msg){
alert(\'回调函数\');
});
});
//上述方法向服务器发送了数据,有回调函数,但是会将服务器返回的所有数据以json格式全部加载到#load中
1.2: get方法,向服务器发送请求(提交方式是get)
如下:
$(\'input[type=button]\').click(function(){
var send={\'userName\':$(\'#userName\').val()};
$.get(\'test!checkName\',send,function(data){
$(\'#load\').html(data.msg);
});
});
//上述方法是以get方法向服务器发送了一个请求,并将返回的数据添加到#load中
1.3: post方法,向服务器发送请求(提交方式是post)
如下:
$(\'input[type=button]:first\').click(function(){//检测的单击事件
var send={\'userName\':$(\'#userName\').val()};//需要传入的参数 json格式
$.post(\'test!checkName\',send,function(data){//post 和get一样 参数(url(请求地址action),参数,回调函数(获取响应的参数))
if(data.flag){//获取响应参数中的flag boolean类型
$(\'#load\').html(\'用户名已经存在\');
}else{
$(\'#load\').html(\'用户名可以注册\');
}
});
});
//上述方法是以post方法向服务器发送了一个请求,并将返回的数据添加到#load中,与get用法一样,
//flag是action中的封装之后属性,下面的user,userList都是action中的封装属性
1.4: ajax方法,向服务器发送请求
如下:
$(\'input[type=button]:last\').click(function (){//查询的单击事件
var sendData={\'userId\':$(\'#userId\').val()};//数据 json格式数据
var url="test!search";//地址
$.ajax({//注意写法是json格式的 推荐使用ajax 原因是速度快
url:url,//地址
data:sendData,//参数
type:\'post\',//设置提交类型
success:function(data){//请求成功的回调函数
$(\'#load2\').html(data.user.id+\',\'+data.user.userName+\',\'+data.user.userAddress);
}
});
});
//上述方法是以ajax方法向服务器发送了一个请求,并将返回的数据添加到#load中,可以设置提交类型,推荐使用这个方法。
2.在回调函数中遍历返回的json数组或者集合
2.1: 直接使用for遍历
如下:
$(\'input[type=button]:first\').click(function(){//显示信息单击事件
var url="test!searchAll?z="+Math.random();//Math.random()随机数,用来防止浏览器缓存
$.ajax({
url:url,
type:\'post\',
success:function(data){
var value=\'\';
for(var i=0;i<data.userList.length;i++){
value+=data.userList[i].userName+\',\'+data.userList[i].userAddress+\'<br>\';
}
$(\'#load\').html(value);
}
});
});
//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过for遍历添加到#load的文本。
2.2: 使用jquery的工具函数eval转换
如下:
$(\'input[type=button]:last\').click(function(){//查询所有单击事件
$(\'#load\').html(\'\');//清空文本
$(\'#load\').append(\'<ul></ul>\');
$.ajax({
url:\'test!searchAll\',
type:\'post\',
success:function(data){
var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
for(var i=0;i<user.length;i++){
$(\'#load<ul\').append(\'<li>\'+user[i].userName+\',\'+user[i].userAddress+\'</li>\');
}
}
});
});
//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过eval转换为数组,再使用for遍历添加到#load的文本中。
2.3: 使用jquery的工具函数each遍历
如下:
success:function (data) {//回调函数
$(data.userList).each(function (i, value) {
$("#load").append("id:" + value.userName + ", name: " + value.userAddress ");
});
}
//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,直接使用工具函数each()遍历添加到#load的文本中。
3.ajax中的提示信息
3.1:ajaxStart()和ajaxStop()
如下:
$(document).ajaxStart(function(){
$(\'#loading\').show();//显示#loading
}).ajaxStop(function(){
$(\'#loading\').hide();//隐藏#loading
});
//上述方法中,定义了整个html文档中提交ajax和ajax完成之后(ps:jquery支持链表式操作)。
3.2:ajaxSend()方法
如下:
$(document).ajaxSend(function(evt, request, settings){//请求之前
$("#load").append("<li>开始请求: " + settings.url + "<li>");
});
//上述方法中,定义了整个html文档中提交ajax之前的函数。
4.ajax中的错误处理
4.1:定义ajax()方法中的错误回调函数
如下:
$(\'input[type=button]\').click(function(){//查询所有单击事件
$.ajax({
url:\'test!searchAll?z=\'+Math.random(),
type:\'post\',
timeout:3000,//设置请求时间/毫秒
success:function(data){//请求成功的回调函数
$(\'#load\').append(\'<ul></ul>\');
$(\'#load>ul\').html(\'\');//清空
var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
for(var i=0;i<user.length;i++){//循环文本
$(\'#load>ul\').append(\'<li>\'++user[i].userName+\',\'+user[i].userAddress+\'</li>\');
};
},
error:function(jqXHR,textStatus,errorThrown){//错误的回调函数
if(errorThrown==\'Not Found\'){//errorThrown 错误异常信息
$(\'#load\').html(\'无法找到请求.\');
}
if(textStatus==\'timeout\'){// 错误状态
$(\'#load\').html(\'请求超时。。。\');
}
}
});
});
//上述方法中,定义了ajax中的error回调函数,与success对应(ps:注意ajax()函数中的格式是json格式,不能写成链表)。
4.2:全局ajaxError()方法
如下:
$(document).ajaxError(function(){//捕捉错误 比回调函数error:function优先
$(\'#load\').html(\'ajax请求发送错误!\');
});
//上述方法中,定义了整个html文档中ajaxError()方法,用于捕捉所有的请求错误。
5.js动态提交
function sub(method){
document.myform.action="action?="+method;
document.myform.submit();
}