JS将form表单转换为json数据，使用ajax发送请求案例

一个菜

于 2018-03-02 14:46:37 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xiangchengzhangdecai/article/details/79423192

本文介绍了一种使用jQuery将HTML表单数据序列化为JSON格式的方法，并演示了如何利用该JSON数据发起POST请求来实现用户登录功能。具体包括自定义jQuery插件serializeJson()的实现细节及其实用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
			
			//将form表单转换为json数据
			$.fn.serializeJson=function(){  
	            var serializeObj={};  
	            var array=this.serializeArray(); //将form表单序列化数组对象 
	            var str=this.serialize();  //将form表单序列化字符串
	            $(array).each(function(){  //遍历表单数组拼接json串
	                if(serializeObj[this.name]){   
	                    if($.isArray(serializeObj[this.name])){  
	                        serializeObj[this.name].push(this.value);  
	                    }else{  
	                        serializeObj[this.name]=[serializeObj[this.name],this.value];
	                    }  
	                }else{  
	                    serializeObj[this.name]=this.value;   
	                }  
	            });  
	            return serializeObj;  
	        }; 
	        
	        // 点击查询按钮，将form数据转换为json 绑定datagrid 
	     	$("#button").click(function(){
					// 转换form对象 到 json,发送请求
					var params = $("#loginForm").serializeJson();
					$.post('$rc.contextPath/niuniu/shopKeeperlogin',params,function(data){
						if(data.isSuccess==0){
							alert(data.message);
						}else if(data.isSuccess==1){
							window.location.href="$rc.contextPath/niuniu/userLogin";
						}
					})