js中表单数据序列化方式
2023-09-14 08:57:20 时间
一共有以下三种:
var obj1 = $('#queryForm').serialize(); var obj2 = $('#queryForm').serializeArray(); var obj3 = $('#queryForm').serializeObject();
var obj4 = JSON.stringify(obj3); //通过3转化为json字符串
分别对应的是:
obj1: 字符串拼接
obj2: 对象数组,都是name,vlaue
obj3: 对象
obj4: json字符串
应用场景:
1. 使用easyui中的datagrid表格控件展示数据的时候,在查询的页面中使用如下:
//toolbar按钮 function searchData(){ var obj = $('#queryForm').serializeObject(); $('#dg_sub').datagrid("reload",obj); }
2. ajax向后台提交数据时:
如果一个表单的提交,可以直接使用第3种形式,即向后台提交一个object对象。例子如下:
$.ajax({ type: 'POST', url: ctx + "/buyOrderDetail/buyOrderDetailSave", async: false, data: $('#buyOrderForm').serializeObject(), success: function(data){ }, error:function(data){ } });
如果有多个表单需要同时向后台提交,这样使用第3种就不行了,ajax就需要做以下调整更新:
var buyOrderStr = JSON.stringify($('#buyOrderForm').serializeObject()); $.ajax({ type: 'POST', url: ctx + "/buyOrderDetail/buyOrderDetailSave", async: false, data: {buyOrderStr: buyOrderStr, entities: entities}, success: function(data){ }, error:function(data){ } });
这时候就变成了json字符串,在java后台直接接收字符串形式,然后使用json转对象即可。
//保存采购单明细信息 @RequestMapping("/buyOrderDetailSave") @ResponseBody public String buyOrderDetailSave(Model model,String buyOrderStr, String entities) throws Exception { BuyOrder buyOrder = JSON.parseObject(buyOrderStr, BuyOrder.class); entities = entities.substring(2); entities =" [" + entities + "]"; //前端提交的LIST List<BuyOrderDetail> listDetail = JSON.parseArray(entities, BuyOrderDetail.class); }
相关文章
- js校验表单后提交表单的三种方法总结
- JS框架_(Vue.js)带有星期日期的数字时钟
- Node.js处理I/O数据之Buffer模块缓冲数据
- js发送和接收二进制字节流数据
- Node.js压缩与解压数据
- js navigator.wakeLock 保持屏幕唤醒状态
- node.js原生后台进阶(一)
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- Atitit vue.js 把ajax数据 绑定到form表单
- Atitit 跨平台异常处理(2)--------异常转换 -----java c# js异常对象结构比较and转换
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle
- 纯js实现的条形码扫描实现
- js生成二维码
- js图片预加载记录demo示例(整理)
- html+css+js实现时钟
- node.js JS对象和JSON字符串之间的转换
- js在方法Ajax请求数据来推断,验证无效(OnClientClick="return Method();"),或者直接运行的代码隐藏
- 深入了解JS严格模式
- JS数据类型转换完全攻略
- 基于JAVA实现的WEB端UI自动化 - WebDriver高级篇 - 执行JS操作