jquery 表单提交

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

}

 

转载于:https://www.cnblogs.com/Jenny-sider/p/4512863.html