广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

小程序怎么才能制作_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程序设计有所帮助。




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系