JS獲取一個表單字段中多條數(shù)據(jù)并轉(zhuǎn)化為json格式
如圖需要獲取下面兩個li標(biāo)簽里面的數(shù)據(jù),然后傳給后臺;而后臺接收的數(shù)據(jù)格式是json的,所以需要把兩個li里面的信息轉(zhuǎn)化為以下格式的。
{recieverName:小紅,recieverPhone:12341234,recieverAddress:中國湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中國上海}
代碼如下:
var recieverArr = []; //全局變量 var recieverMsg = {}; //全局變量 function recieverMsgToJson(parentFormId){ //若有多個表單公用這個函數(shù),這里需要傳所屬表單的ID;例如新增和修改。 $(parentFormId + ".recieverList li").each(function(m){ //遍歷每個li,當(dāng)前有兩個li var recieverAttributes = []; $(this).find("span").each(function(n){ //遍歷每個li下的span,而每個li下有三個span recieverAttributes[n] = $(this).children("input").val(); //找到每個span下存放著數(shù)據(jù)的input框,并獲取值存放到數(shù)組中 }); var recieverObj = { //用對象來表示數(shù)據(jù);這時對象是{recieverName:小明,recieverPhone:12345678,recieverAddress:中國上海} receiverName:recieverAttributes[0], receiverPhone:recieverAttributes[1], receiverAddress:recieverAttributes[2] }; recieverArr.push(recieverObj); }); } recieverMsg = JSON.stringify(recieverArr).replace(/\[|]/g, '') //將數(shù)組轉(zhuǎn)化為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("新增訂單失敗") } })
總結(jié)
以上所述是小編給大家介紹的JS獲取一個表單字段中多條數(shù)據(jù)并轉(zhuǎn)化為json格式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- ASP之處理用Javascript動態(tài)添加的表單元素數(shù)據(jù)的代碼
- 原生js實現(xiàn)獲取form表單數(shù)據(jù)代碼實例
- Vue.js實現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動賦值、表單自動取值)
- form表單數(shù)據(jù)封裝成json格式并提交給服務(wù)器的實現(xiàn)方法
- 基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復(fù)選框的表單提交
- Vue.js基礎(chǔ)指令實例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
- 利用JS輕松實現(xiàn)獲取表單數(shù)據(jù)
- JavaScript動態(tài)添加數(shù)據(jù)到表單并提交的幾種方式
相關(guān)文章
javascript中return,return true,return false三者的用法及區(qū)別
這篇文章主要介紹了javascript中return,return true,return false三者的用法及區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-11-11提供復(fù)制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼
提供復(fù)制本站內(nèi)容時出現(xiàn),該文章轉(zhuǎn)自腳本之家等字樣的js代碼...2007-03-03JavaScript實現(xiàn)輸入框與清空按鈕聯(lián)動效果
本文給大家分享基于js實現(xiàn)輸入框與清空框按鈕聯(lián)動效果,非常實用,代碼簡單易懂,感興趣的朋友一起看看吧2016-09-09JavaScript中實現(xiàn)無縫滾動、分享到側(cè)邊欄實例代碼
本文給通過js代碼實現(xiàn)無縫滾動,側(cè)邊欄效果,在項目中經(jīng)常會遇到,下面小編把代碼整理分享到腳本之家平臺,供大家參考2016-04-04