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();}