JS获取一个表单字段中多条数据并转化为json格式


Posted in Javascript onOctober 17, 2017

JS获取一个表单字段中多条数据并转化为json格式

如图需要获取下面两个li标签里面的数据,然后传给后台;而后台接收的数据格式是json的,所以需要把两个li里面的信息转化为以下格式的。

{recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}

代码如下:

var recieverArr = []; //全局变量
var recieverMsg = {}; //全局变量
function recieverMsgToJson(parentFormId){  //若有多个表单公用这个函数,这里需要传所属表单的ID;例如新增和修改。
 $(parentFormId + ".recieverList li").each(function(m){  //遍历每个li,当前有两个li
   var recieverAttributes = [];
   $(this).find("span").each(function(n){  //遍历每个li下的span,而每个li下有三个span
     recieverAttributes[n] = $(this).children("input").val();  //找到每个span下存放着数据的input框,并获取值存放到数组中
   });
   var recieverObj = {  //用对象来表示数据;这时对象是{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}
     receiverName:recieverAttributes[0],
     receiverPhone:recieverAttributes[1],
     receiverAddress:recieverAttributes[2]
   };
   recieverArr.push(recieverObj);    
 });
}
recieverMsg = JSON.stringify(recieverArr).replace(/\[|]/g, '') //将数组转化为json格式
console.log(recieverMsg)
//{recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海}
 $.ajax({
  url: '',
  type: 'post',
  data: {
   receiverInfo:recieverMsg,//收件人信息
  },
  traditional:true,
  success: function(data){
   console.log(data);
  },
  error: function() {
   alert("新增订单失败")
  }
 })

总结

以上所述是小编给大家介绍的JS获取一个表单字段中多条数据并转化为json格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
AngularJS指令用法详解
Nov 02 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 #Javascript
JS实现div模块的截图并下载功能
Oct 17 #Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 #Javascript
AngularJS 控制器 controller的详解
Oct 17 #Javascript
VUE前端cookie简单操作
Oct 17 #Javascript
javascript 判断用户有没有操作页面
Oct 17 #Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
You might like
基于PHP读取csv文件内容的详解
2013/06/18 PHP
微信支付开发交易通知实例
2016/07/12 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
多广告投放代码 推荐
2006/11/13 Javascript
How to Auto Include a Javascript File
2007/02/02 Javascript
取选中的radio的值
2010/01/11 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
js中replace的用法总结
2013/12/27 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python开发之list操作实例分析
2016/02/22 Python
python实现UDP协议下的文件传输
2020/03/20 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
基于python实现操作redis及消息队列
2020/08/27 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
Linux Interview Questions For software testers
2012/06/02 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
护士自荐信范文
2013/12/15 职场文书
读书活动实施方案
2014/03/10 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
出差报告格式模板
2014/11/06 职场文书
2015年质检工作总结
2015/05/04 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript