form 表单 转换为json-多种(通用/多维数组) 全方案

 JSON 在 JavaScript 中重要,因其轻量、通用、易读,适用于数据交换、存储和传输。

为什么写这个文章,废话不多,直接近主题。

一、通用

一般采用jquery编写

	var key = $('#'+"cyberwin_form_card_newadd").serialize();

结果:

TotalPrice=300&TotalCount=20&Memo=&paymethod%5B1%5D%5Bpaymethod_id%5D=1&paymethod%5B1%5D%5Bpaymethod_price%5D=200&paymethod%5B2%5D%5Bpaymethod_id%5D=2&paymethod%5B2%5D%5Bpaymethod_price%5D=50&paymethod%5B3%5D%5Bpaymethod_id%5D=7&paymethod%5B3%5D%5Bpaymethod_price%5D=50

二、form 序列号数组

(function($){  $.fn.serializeJson=function(){  var serializeObj={};  var array=this.serializeArray();  $(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); 

结果

但是有个问题

数组没有分开

三、多维数组转换json

<ul id="cyberwin_paymethod" class="cyberwin_paymethod">
<li><select class="input_sijiao" name="paymethod[1][paymethod_id]" tips=""><option value="1">现金</option><option value="2">信用卡</option><option value="3">电子钱包</option><option value="4">会员卡</option><option value="5">积分</option><option value="6">挂帐</option><option value="7">赠卷</option></select><input class="input_sijiao paymethod_price" name="paymethod[1][paymethod_price]" value="300"><input class="input_sijiao paymethod_delete" type="button" onclick="fun_未来之窗_删除支付_内页frame(this)" value="x"></li>
<li><select class="input_sijiao" name="paymethod[2][paymethod_id]" tips=""><option value="1">现金</option><option value="2">信用卡</option><option value="3">电子钱包</option><option value="4">会员卡</option><option value="5">积分</option><option value="6">挂帐</option><option value="7">赠卷</option></select><input class="input_sijiao paymethod_price" name="paymethod[2][paymethod_price]" value="100"><input class="input_sijiao paymethod_delete" type="button" onclick="fun_未来之窗_删除支付_内页frame(this)" value="x"></li>
<li><select class="input_sijiao" name="paymethod[3][paymethod_id]" tips=""><option value="1">现金</option><option value="2">信用卡</option><option value="3">电子钱包</option><option value="4">会员卡</option><option value="5">积分</option><option value="6">挂帐</option><option value="7">赠卷</option></select><input class="input_sijiao paymethod_price" name="paymethod[3][paymethod_price]" value="50"><input class="input_sijiao paymethod_delete" type="button" onclick="fun_未来之窗_删除支付_内页frame(this)" value="x"></li>
</ul>

这种一般是3维数组

(function($){  //WLZC_serializeJson//2024-2-29$.fn.WLZC_serializeJson=function(){  var wlzc_serializeObj={};  var array=this.serializeArray();  $(array).each(function(){ var wlzc_ei_name = this.name;//ymethod[1][paymethod_id]var ie = wlzc_ei_name.indexOf("[");if(ie >=0){//console.log("未来之窗编码,存在" + wlzc_ei_name);var wlzc_ei_name_yh1 =wlzc_ei_name.replace(/]/g,"");const wlzc_ei_name_Array = wlzc_ei_name_yh1.split("[");//console.log("未来之窗编码,分组");const  wlzc_ei_len = wlzc_ei_name_Array.length;console.log(wlzc_ei_name_Array);if(wlzc_ei_len == 3){var array_1 =wlzc_ei_name_Array[0];var array_2 =wlzc_ei_name_Array[1];var array_3 =wlzc_ei_name_Array[2];//错误 wlzc_serializeObj[array_1][array_2][array_3]=this.value;  //var jsonobj = array_2[array_3]=this.value;  var jsonobj_3=Array();jsonobj_3[array_3]=this.value;  //console.log("未来之窗编码,分组jsonobj_3");//console.log(jsonobj_3);var jsonobj_2=Array();jsonobj_2[array_2] = jsonobj_3;  //console.log("未来之窗编码,分组jsonobj_2");//console.log(jsonobj_2);//wlzc_serializeObj[array_1]=jsonobj_2;if(wlzc_serializeObj[array_1]){ }else{//	wlzc_serializeObj[array_1]=[];  wlzc_serializeObj[array_1]={};  }if(wlzc_serializeObj[array_1][array_2]){ }else{// wlzc_serializeObj[array_1][array_2]=[]; wlzc_serializeObj[array_1][array_2]={}; }if(wlzc_serializeObj[array_1][array_2][array_3]){ wlzc_serializeObj[array_1][array_2][array_3]=this.value;  }else{wlzc_serializeObj[array_1][array_2][array_3]=this.value;  }}}else{//未来之窗if(wlzc_serializeObj[this.name]){  if($.isArray(wlzc_serializeObj[this.name])){  wlzc_serializeObj[this.name].push(this.value);  }else{  wlzc_serializeObj[this.name]=[wlzc_serializeObj[this.name],this.value];  }  }else{  wlzc_serializeObj[this.name]=this.value;   }}});  return wlzc_serializeObj;  }; })(jQuery); 

结果输出

已经正常显示为json

四、将json对象转换为json字符串

 var key=JSON.stringify(param4);;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/500084.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

msys2使用MinGW64编译ffmpeg 64bit库

搭建编译环境 下载安装msys2&#xff0c;参考文章《QT Mingw编译ffmpeg源码以及测试》。 安装必要的库文件 双击msys2安装目录下的msys2.exe,在cmd窗口中执行以下命令&#xff1a; //升级所有库 pacman -Syu //使用下列命令安装ffmpeg编译的依赖和工具 pacman -S mingw-w64-x8…

Docker技术概论(4):Docker CLI 基本用法解析

Docker技术概论&#xff08;4&#xff09; Docker CLI 基本用法解析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:http…

【IO流系列】PrintStream 和 PrintWriter 打印流

打印流 1. 概述2. 作用3. PrintStream 字节打印流3.1 构造方法3.2 常用方法3.3 特有方法3.4 代码示例 4. PrintWriter 字符打印流4.1 构造方法4.2 常用方法4.3 特有方法4.4 代码示例 5. 注意事项 1. 概述 PrintStream 和 PrintWriter 都是 Java 中用于输出数据的打印流类&…

鸿蒙OpenHarmony多线程能力场景化示例实践

简介 在OpenHarmony应用中&#xff0c;每个 进程 都会有一个主线程&#xff0c;主线程主要承担执行UI绘制操作、管理ArkTS引擎实例的创建和销毁、分发和处理事件、管理Ability生命周期等职责&#xff0c;具体可参见 线程模型概述 。因此&#xff0c;开发应用时应当尽量避免将耗…

基于YOLOv8深度学习的复杂场景下船舶目标检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

ANTLR4规则解析生成器(三):遍历语法分析树

文章目录 1 词法分析2 语法分析3 遍历语法分析树3.1 Listener3.2 Visitor 4 总结 1 词法分析 词法分析就是对给定的字符串进行分割&#xff0c;提取出其中的单词。 在antlr4中&#xff0c;词法规则的名称的首字母需要大写&#xff0c;右侧必须是终结符&#xff0c;通常将词法…

[AutoSar]BSW_Com06 CAN报文应用层到Can总线的函数调用

目录 关键词平台说明一、背景二、PDU转换三、函数调用 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC)autosar版本4.3.X >>>>>回到总目…

音频筑基:CD还是HiRes?高清音频分类一文说透

音频筑基&#xff1a;CD还是HiRes&#xff1f;高清音频分类一文说透 前言音乐品质分类相关资料 前言 音频信号中&#xff0c;经常遇到高清音乐、无损音质、CD、HiRes等说法&#xff0c;本文主要在纯数字信号级别&#xff0c;从音源分类和编码质量两个维度&#xff0c;做一个分析…

【QT+QGIS跨平台编译】之五十八:【QGIS_CORE跨平台编译】—【qgsexpression_texts.cpp生成】

文章目录 一、Python二、生成来源三、构建过程3.1 构建qgsexpression_texts.cpp.temp3.2 构建qgsexpression_texts.cpp一、Python python.exe 是 Python 解释器的可执行文件,用于在命令行中运行 Python 脚本。它是 Python 编程语言的解释器程序,负责解析和执行 Python 代码。…

林浩然与杨凌芸的Scala编程历险记:变量与数据类型的魔法对决

林浩然与杨凌芸的Scala编程历险记&#xff1a;变量与数据类型的魔法对决 在Scala世界的梦幻殿堂中&#xff0c;两位英勇的程序员——林浩然和杨凌芸正准备开启一场代码之旅。这次&#xff0c;他们将深入探索Scala王国中的变量奥秘与数据类型丛林。 一、变量声明篇 &#xff0…

Linux|centos7|yum和编译安装ImageMagick记录

一&#xff0c; yum安装imagemagick imagemagick这个软件是图像文件的处理神器&#xff0c;可以文字转图像以及图像的剪辑等等工作&#xff0c;也是配合人工智能工程的不可或缺的工具&#xff0c;具体的用处和特点就不在这里废话了&#xff0c;有兴趣的百度就行了 本次是在…

【Redis】深入理解 Redis 常用数据类型源码及底层实现(6.详解Set和ZSet数据结构)

本文是深入理解 Redis 常用数据类型源码及底层实现系列的第6篇&#xff5e;前5篇可移步(&#xffe3;∇&#xffe3;)/ 【Redis】深入理解 Redis 常用数据类型源码及底层实现&#xff08;1.结构与源码概述&#xff09;-CSDN博客 【Redis】深入理解 Redis 常用数据类型源码及底…