Heim > Web-Frontend > js-Tutorial > Hauptteil

So erhalten Sie mehrere Daten in einem Formularfeld und konvertieren sie in das JSON-Format

一个新手
Freigeben: 2017-10-18 09:55:18
Original
1904 Leute haben es durchsucht

Wie in der Abbildung gezeigt, müssen Sie die Daten in den folgenden zwei Li-Tags abrufen und sie dann an das Backend übergeben. Das vom Backend empfangene Datenformat ist also JSON Sie müssen die Informationen in den beiden li-Tags in das folgende Format konvertieren.

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

Der Code lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonSo erhalten Sie mehrere Daten in einem Formularfeld und konvertieren sie in das JSON-Format. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!