Maison  >  Article  >  interface Web  >  JS obtient plusieurs éléments de données dans un champ de formulaire et les convertit au format json. Exemple de partage.

JS obtient plusieurs éléments de données dans un champ de formulaire et les convertit au format json. Exemple de partage.

小云云
小云云original
2018-01-15 10:32:432164parcourir

Cet article présente principalement les informations pertinentes sur l'obtention par JS de plusieurs données dans un champ de formulaire et leur conversion au format json. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Comme le montre la figure, vous devez obtenir les données dans les deux balises li ci-dessous, puis les transmettre à l'arrière-plan et le format de données reçu par l'arrière-plan est ; json, vous devez donc le mettre dans les deux balises li. Les informations sont converties au format suivant.


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

Le code est le suivant :


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("新增订单失败")
  }
 })

Recommandations associées :

Exemple de code de soumission Ajax au format json

Explication détaillée du contrôle du format json en php

java convertit les documents XML en données au format json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn