Maison  >  Article  >  interface Web  >  Comment obtenir plusieurs éléments de données dans un champ de formulaire et les convertir au format json

Comment obtenir plusieurs éléments de données dans un champ de formulaire et les convertir au format json

一个新手
一个新手original
2017-10-18 09:55:181912parcourir

Comme le montre la figure, vous devez obtenir les données dans les deux balises li suivantes, puis les transmettre au backend ; le format de données reçu par le backend est json, donc vous besoin de convertir les informations dans les deux balises li Dans le format suivant.

{recieverName:Xiaohong,recieverPhone:12341234,recieverAddress:Hunan, Chine},{recieverName:Xiaoming,recieverPhone:12345678,recieverAddress:Shanghai, Chine}

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

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