当前位置:首页 > 日记 > 正文

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

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格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

经典令人心痛伤感个性签名集锦

经典令人心痛伤感个性签名集锦

心痛,个性签名,经典,伤感,集锦,  有些人的经历多了,看到很多心痛伤感的事情,用一些文字表达内心的心痛伤感的情绪,以下是小编为大家收集整理的《经典令人心痛伤感个性签名》全部内容,如果您喜欢小编的推荐,请继续关注。经典令人心痛伤感个性签…

vue引入jq插件的实例讲解

vue引入jq插件的实例讲解

插件,实例,电脑软件,vue,jq,今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个…

怎么设置ppt2013不自行压缩设置ppt

怎么设置ppt2013不自行压缩设置ppt

压缩,设置,方法,电脑软件,  PPT制作是信息时代下的产物,是当前办公室普遍应用的一种软件,不管用于教学还是企业展示,Powerpoint软件都具有较好的展示功能,能够形象生动的表达意愿和目的。在PowerPoint2013里面默认的设置是讲图像进行压缩…

微信小程序教程系列之设置标题栏和

微信小程序教程系列之设置标题栏和

标题栏,设置,教程,导航栏,程序,微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window在app.json文件里面,通过window对象里面的属性进行设置示例:app.json:运行:设置导航栏导航栏TabBar如果我们的小程序是一个多 tab 应用(客…

excel中插页码的教程

excel中插页码的教程

教程,页码,电脑软件,excel,  Excel中文档的页码该如何插入呢?接下来是小编为大家带来的excel中插页码的教程,供大家参考。excel中插页码的教程:  插页码步骤1:打开需要添加页码的表格。插页码步骤2:点击菜单栏中的“打印预览”,弹…

ppt2013如何找回未保存文件

ppt2013如何找回未保存文件

保存文件,方法,电脑软件,  有时候鬼使神差的总是忘记保存文件,或者是删除文件的时候一不小心,就将需要的ppt文件未保存给误删了,那如何修复ppt文件呢?小编就为你提供ppt2013找回未保存删除文件的方法。ppt2013找回未保存文件的方法这里以off…

对于js垃圾回收机制的理解

对于js垃圾回收机制的理解

垃圾回收机制,电脑软件,js,原理找到不再被使用的变量,然后释放其占用的内存,但这个过程不是时时的,因为其开销比较大,所以垃圾回收器会按照固定时间间隔周期性的执行回收方式a.标记清除当变量进入环境时,将这个变量标记为“进入环境”;当变量离…

根据现实照片创作写实风格的圆珠笔

根据现实照片创作写实风格的圆珠笔

笔画,照片,现实,风格,圆珠,今天为大家分享根据现实照片创作写实风格的圆珠笔画方法,教程对于喜好圆珠笔的朋友可以参考本文,希望能对大家有所帮助!教程结束,以上就是根据现实照片创作写实风格的圆珠笔画教程,怎么样,是不是很棒,希望这篇文章能对大…

在excel中怎么使柱状图显示数据exc

在excel中怎么使柱状图显示数据exc

柱状图,显示,数据,步骤,方法,  我们用excel做图的时候需要将各图对应的数据显示在图中,具体怎么设置呢?那么下面小编就教你在excel中怎么使柱状图显示数据。excel使柱状图显示数据的步骤以下面这个已经做好的柱状图为例,怎么设置显示数据呢…

PS怎么将多个文件集合到一个文件当

PS怎么将多个文件集合到一个文件当

文件,集合,多个,电脑软件,PS,PS软件,大家已经并不陌生了,那么,有些个别的功能可能还是不为大多数人所知道的,今天我向大家介绍一个“联系表”的功能 ,能够快速的把多个文件集合到一个文件当中。软件名称:Adobe Photoshop 8.0 中文完整…

如何设置word的页码

如何设置word的页码

页码,如何设置,电脑软件,word,  Word文档中插入页码是办公的基本操作,利用微软Office所提供的强大页码功能,我们可以实现丰富多样的页码格式。那么下面就由小编给大家分享下设置word的页码技巧,希望能帮助到您。设置word的页码步骤如下: …

excel2010 无法打印的解决方法exce

excel2010 无法打印的解决方法exce

解决方法,电脑软件,strong,  在Excel中录入好数据以后经常需要用到打印功能,有时候打印功能无法打印,这个时候就需要技巧来解决了。下面是小编带来的关于excel2010 无法打印的解决方法,欢迎阅读!excel2010 无法打印的解决方法解决无法打印步…