小程序怎么才能制作_jQuery完成form表单序列化转换

日期：2021-01-08 浏览：

jQuery实现form表单序列化转换为json对象功能示例这篇文章主要介绍了jQuery实现form表单序列化转换为json对象功能,结合实例形式分析了表单数据传输中使用serializeJson进行序列化操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现form表单序列化转换为json对象功能。分享给大家供大家参考，具体如下：

做web前端开发时，需要ajax提交大量表单数据，如果一个个form字段拼接很费劲也容易出错，下面方法可解决这个问题

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" / 
 title jquery form序列化转换为json对象 /title 
 script src="///jquery/3.0.0/jquery.min.js" /script 
 /script 
 /head 
 body 
 form action="" name="post_form" id="post_form" 
 姓名： input type="name" name="name" value="王" 
 br/ 性别： input type="radio" name="sex" value="男" checked 男 input type="radio" name="sex" value="女" 女
 br/ 爱好： input type="checkbox" name="loves" value="篮球" 篮球 input type="checkbox" name="loves" value="足球" 足球
 br/ 籍贯： select name="province" 
 option value="上海" 上海 /option 
 option value="北京" 北京 /option 
 option value="深圳" 深圳 /option 
 /select 
 /form 
 div id="result" 
 /div 
 div 
 button id="send" 发送 /button 
 /div 
 script 
 //jquery form序列化转换为json对象
 (function($){
 $.fn.serializeJson=function(){
 var serializeObj={};
 var array=this.serializeArray();
 var str=this.serialize();
 $(array).each(function(){
 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;
 })(jQuery);
 $(document).ready(function(){
 $("#send").click(function(){
 var post_data=$("#post_form").serializeJson();//表单序列化
 $("#(JSON.stringify(post_data));
 /script 
 /body 
 /html

运行效果如下图所示：

凡科抠图：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：

JSON在线格式化工具：

在线XML/JSON互相转换工具：

json代码在线格式化/美化/压缩/编辑/转换工具：

在线json压缩/转义工具：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。