`

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" onclick="allUpdateMethod('10')"/>
<input type="button" id="allClose" value="全部关闭" class="btn" onclick="allUpdateMethod('11')"/>
分享到:
评论

相关推荐

    sendForm.js-Serialize.js

    在JavaScript编程领域中,"sendForm.js-Serialize.js"很可能是一个用于序列化表单数据的库或脚本。序列化是将HTML表单中的数据转换为URL编码字符串的过程,这在进行Ajax请求或者发送POST数据时非常常见。下面将详细...

    jquery ajax 如何向jsp提交表单数据

    这种方式适用于少量数据传输,将表单数据拼接成 URL 查询字符串并附在 AJAX 请求的 URL 后面。例如: ```javascript $.ajax({ type: "POST", url: "ajax.jsp?param1=value1&param2=value2", success: function...

    jQuery Ajax 实例代码 ($.ajax、$.post、$.get)

    2. 如果需要序列化表单数据作为字符串发送,可以使用 serialize() 方法,并将序列化后的字符串作为 'data' 参数传递。 3. 当需要拼接 URL 或数据发送时,可以直接构造字符串赋值给 'url' 或 'data' 参数。 需要注意...

    jQuery工具方法serialize()和serializeArray()

    4. `serializeArray()`返回的是一个JavaScript对象数组,而`serialize()`返回的是一个URL编码的字符串,可以直接用于Ajax请求。 5. 为了处理更复杂的场景,可以结合使用这两个方法,比如先用`serializeArray()`获取...

    jQuery 表单序列化实例代码

    3. jQuery提供了序列化表单数据的两种方法:serialize()和serializeArray()。 - serialize()方法会把一个表单内的元素编码成一个URL查询字符串,这对于处理表单数据和发送GET请求非常有用。该方法会自动处理表单中...

    jQuery实现form表单序列化转换为json对象功能示例

    在Web前端开发中,我们经常需要处理...这种方法在处理复杂表单和大量数据时,比手动拼接字符串更加高效且易于维护。在实际项目中,可以结合Ajax方法,将这些JSON对象发送到服务器端进行处理,从而实现异步数据交互。

    原生js实现form表单序列化的方法

    当我们有form表单而且里面...功能:将表单内容序列化成一个字符串。 这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $(“form”).serialize() 即可。 2.serializeArray()方法 格式:var

    JQuery中serialize()用法实例分析

    JQuery中的serialize()方法主要用于通过序列化表单元素集合的值,创建一个标准的URL编码文本字符串。这种编码方式是为了能够在生成AJAX请求时将数据包含在URL查询字符串中。serialize()操作的对象是代表表单元素集合...

    jQuery Ajax使用实例

    2. 序列化表格内容为字符串的异步请求: ```javascript function noTips() { var formParam = $("#form1").serialize(); $.ajax({ type: 'post', url: 'Notice_noTipsNotice', data: formParam, cache: ...

    论坛的留言板样式,可评论

    4. **数据格式化和序列化**:在发送评论到服务器之前,可能需要将表单数据序列化为JSON或URL编码格式。jQuery提供`.serialize()`方法方便地完成这一过程。 5. **动画效果**:jQuery强大的动画功能可以用于创建视觉...

    使用ajax异步提交表单的几种方法总结

    // 序列化表格内容为字符串 $.ajax({ type: 'post', url: 'Notice_noTipsNotice', data: formParam, cache: false, dataType: 'json', success: function(data) { // 处理返回的数据 } }); } ``` 这种...

    jQuery向后台传入json格式数据的方法

    但在使用jQuery时,可能会使用`serialize()`或`serializeArray()`方法对表单数据进行序列化。`serialize()`方法返回查询字符串,而`serializeArray()`方法返回的是一个对象数组,每个数组元素是一个包含`name`和`...

    jquery_serialization

    jQuery 序列化是一种将 HTML 表单数据转换为 URL 编码字符串的方法,常用于提交表单数据到服务器。在网页开发中,尤其是使用 jQuery 框架时,序列化是处理用户输入数据和与服务器交互的重要手段。在给定的“jquery_...

    python入门到高级全栈工程师培训 第3期 附课件代码

    06 百分号字符串拼接 07 format字符串格式化 08 数学意义的函数与python中的函数 09 为何要有函数 10 函数返回值 11 可变长参数 第15章 01 上节课复习 02 全局变量与局部变量 03 风湿理论之函数即变量 04 函数递归...

Global site tag (gtag.js) - Google Analytics