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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
海贼王:最美的悬赏令!
2020/03/02 日漫
NO3第三帝国留言簿制作过程
2006/10/09 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jquery 问答知识整理
2010/02/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
django 环境变量配置过程详解
2019/08/06 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Python 日期与时间转换的方法
2020/08/01 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
社团成立邀请函
2014/01/08 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
经济担保书范文
2014/04/02 职场文书
2014年资料员工作总结
2014/11/18 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
学雷锋活动简报
2015/07/20 职场文书