Jquery AJAX|Jquery .serialize() --序列表表格内容为字符串，用于 Ajax 请求+序列化表单拼接Url字符串...

Jquery AJAX操作时，传data一般分为两种：1.合成json字符串当做data传值。 2.将form序列化为json字符串传值

 

一、序列化表单拼接Url字符串

有时需要超链接请求Action，不提交表单。但是还想要表单中的数据，

可以使用$("#searchForm").serialize()序列化表单，然后合成url请求。

function openBatchAllUpdate(){
	var param = $("#searchForm").serialize();//form序列化
	$.hpDialog.open("Commission_batchAllUpdateCommission?initLoadMethod=true&"+param);
}

 

 

二、注意：实例配合了artDialog

 

1.合成json字符串当做data传值

<script type="text/javascript">
	$(document).ready(function() {
	var viewdialog;
		<%
		List<Map> list;
		if((list=(List<Map>)request.getAttribute("myList"))!=null){
		for(int i=0; i<list.size();i++){
		%>
		
		/*移动*/
		<% 
			if("10".equals(list.get(i).get("RB1"))){
		%>
		$("#closeYidong<%=list.get(i).get("PROVINCECODE")%>").click(function(){
		<% 
			}
			else{
		%>
		$("#openYidong<%=list.get(i).get("PROVINCECODE")%>").click(function(){
		<%		
			}
		%>	
			var subdialog = $.dialog.open('productManager_openUpdate',{
			  window:'top',
			  width: '30em',
  			  height: 100,
			  title:'修改冲正状态',
			  border:false,
			  lock: true,
			  left:'center',
		  	  content:'',
		  	  yesText:'确定',
		  	  noText:'返回',
		  	   yesFn: function(iframeWin, topWin){
				<% 
					if("10".equals(list.get(i).get("RB1"))){
				%>
				var selRollBack='11';
				<% 
					}
					else{
				%>
				var selRollBack='10';
				<%		
					}
				%>
		  	   	var selOperatorsCode = '<%=list.get(i).get("OP1")%>';
		  	    var PROVINCECODE = '<%=list.get(i).get("PROVINCECODE")%>';
		  	   	var pass2 = iframeWin.document.getElementById('pwd').value;
		  	   	var reg = /^[\w]{1,}$/;
		  	   	if (pass2 == "") {
						view("业务密码不能为空！");
						return false;
					}
		  	   	else if (!reg.test(pass2)) {
						view("请输入合法的业务密码！");
						return false;
					}else{
		  	   		var aj = $.ajax( {
								url : 'productManager_reverseUpdate',// 跳转到 action
								data : {
		  	   						selRollBack : selRollBack,
		  	   						selOperatorsCode : selOperatorsCode,
		  	   						PROVINCECODE : PROVINCECODE,
									pass2 : pass2
								},
								type : 'post',
								cache : false,
								dataType : 'json',
								success : function(data) {
									if(data.msg =="true" ){
										// view("修改成功！");
										alert("修改成功！");
										window.location.reload();
									}else{
										view(data.msg);
									}
								},
								error : function() {
									// view("异常！");
									alert("异常！");
								}
							});
						}
		 	 },
		 	  noFn: function() {
              	 }
 		 	}); 
		});				
		<%}}%>
	});	
function view(str){
	viewdialog = $.dialog({
			window:'top',
			title:false,
			border:false,
			lock: true,
				  content:str,
				  yesFn: function(){
				  }
		  	  })
}
</script>

 

2.将form序列化为json字符串传值

/*全部修改价格策略*/
function allUpdateMethod(batchState)
{
	var subdialog = $.dialog.open('productManager_openUpdate',{
	  window:'top',
	  width: '30em',
	  height: 100,
	  title:'批量修改产品状态',
	  border:false,
	  lock: true,
	  left:'center',
  	  content:'',
  	  yesText:'确定',
  	  noText:'返回',
  	   yesFn: function(iframeWin, topWin){
	  	$("#batchState").val(batchState);
  	   	var pass2 = iframeWin.document.getElementById('pwd').value;
  	  	$("#pass2").val(pass2);
  	  	var fromToJson = $("#form1").serialize();//序列表表格内容为字符串，用于 Ajax 请求。
  	   	var reg = /^[\w]{1,}$/;
  	   	if (pass2 == "") {
				view("业务密码不能为空！");
				return false;
			}
  	   	else if (!reg.test(pass2)) {
				view("请输入合法的业务密码！");
				return false;
			}else{
  	   		var aj = $.ajax( {
						url : 'productManager_batchUpdate',// 跳转到 action
						data : fromToJson,//form表单转成json数据
						type : 'post',
						cache : false,
						dataType : 'json',
						success : function(data) {
							if(data.msg =="true" ){
								// view("修改成功！");
								alert("修改成功！");
								window.location.reload();
							}else{
								view(data.msg);
							}
						},
						error : function() {
							// view("异常！");
							alert("异常！");
						}
					});
				}
 	 },
 	  noFn: function() {
      	 }
	 	}); 	
}
		
/*提示信息*/		
function view(str){
	viewdialog = $.dialog({
			window:'top',
			title:false,
			border:false,
			lock: true,
				  content:str,
				  yesFn: function(){
				  }
	})
}

 页面jsp调用

<input type="button" id="allOpen" value="全部开启" class="btn" οnclick="allUpdateMethod('10')"/>
<input type="button" id="allClose" value="全部关闭" class="btn" οnclick="allUpdateMethod('11')"/>