源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-10-17 16:58:25 | 显示全部楼层 |阅读模式
这篇文章主要介绍了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格式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-4 04:06:25 | 显示全部楼层
收下来看看怎么样
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-2 22:12:50 | 显示全部楼层
谢谢分享,先下来用用
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-2 22:49:13 | 显示全部楼层
iiguuubhuiuihu
回复 支持 反对

使用道具 举报

9

主题

2万

回帖

420

积分

中级会员

Rank: 3Rank: 3

积分
420
发表于 2022-12-31 16:35:48 | 显示全部楼层
hi哦回复iOS就看见
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2023-1-29 05:32:37 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2023-8-27 06:53:43 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2023-9-4 11:28:19 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-2 06:26:02 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2023-12-2 10:16:49 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 23:37 , Processed in 0.067586 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表