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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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获取网站域名和地址的代码
2008/08/17 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
python抓取网页中的图片示例
2014/02/28 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Python 错误和异常代码详解
2018/01/29 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
django框架auth模块用法实例详解
2019/12/10 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
新闻编辑自荐信
2013/11/03 职场文书
英语自荐信常用语句
2013/12/13 职场文书
房展策划方案
2014/06/07 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
中秋节寄语2015
2015/03/24 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL