Jenny-sider

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

}

 

分类:

技术点:

相关文章: