jQuery通過ajax快速批量提交表單數(shù)據(jù)
當(dāng)表單數(shù)據(jù)項很多時,手動獲取表單項的值將變得效率低下,結(jié)合jQuery提供的函數(shù)serialize(),我們可以實現(xiàn)快速獲取數(shù)據(jù)并提交表單數(shù)據(jù)。
請看下面的表單:
<form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr> <tr> <td>年齡</td> <td> <input type="text" name="age" /> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="password" /> </td> </tr> <tr> <td>性別</td> <td> <input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女 </td> </tr> <tr> <td>地區(qū)</td> <td> <select name="area"> <option value="heping">和平區(qū)</option> <option value="nankai">南開區(qū)</option> <option value="xiqing">西青區(qū)</option> <option value="hexi">河西區(qū)</option> </select> </td> </tr> <tr> <td>愛好</td> <td> <input type="checkbox" name="hobby[]" value="movie" />電影 <input type="checkbox" name="hobby[]" value="music" />音樂 <input type="checkbox" name="hobby[]" value="basketball" />籃球 </td> </tr> <tr> <td>個人介紹</td> <td> <textarea name="intro" ></textarea> </td> </tr> <tr> <td></td> <td> <input type="button" value="提交" id="submit" /> </td> </tr> </table> </form>
我們可以通過自定義函數(shù)getFormData()來獲取表單的數(shù)據(jù),請看下面的例子:
$(function(){ $('#submit').click(function(){ //選取表單 var form = $('#fm'); //獲取表單數(shù)據(jù) var data = getFormData(form); //發(fā)送AJAX請求 $.post('test.php',data,function(data){ console.log('ok'); }); }); });
getFormData()的實現(xiàn)很簡單:
function getFormData(form){ var data = form.serialize(); data = decodeURI(data); var arr = data.split('&'); var item,key,value,newData={}; for(var i=0;i<arr.length;i++){ item = arr[i].split('='); key = item[0]; value = item[1]; if(key.indexOf('[]')!=-1){ key = key.replace('[]',''); if(!newData[key]){ newData[key] = []; } newData[key].push(value); }else{ newData[key] = value; } } return newData; }
test.php接收到的數(shù)據(jù)將會是:
Array ( [name] => 3241324 [age] => m_admin [password] => 123 [sex] => male [area] => heping [hobby] => Array ( [0] => movie [1] => music ) [intro] => 321432423 )
和普通的表單提交的數(shù)據(jù)格式是一樣的,我們可以很方便的進(jìn)行處理!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery ajax實現(xiàn)批量刪除具體思路及代碼
- PHP jQuery+Ajax結(jié)合寫批量刪除功能
- PHP ajax+jQuery 實現(xiàn)批量刪除功能實例代碼小結(jié)
- JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- jQuery之a(chǎn)jax刪除詳解
- jQuery ajax中使用confirm,確認(rèn)是否刪除的簡單實例
- 如何從jQuery的ajax請求中刪除X-Requested-With
- jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法
- 基于php(Thinkphp)+jquery 實現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- jQuery+ajax實現(xiàn)批量刪除功能完整示例
相關(guān)文章
jQuery動態(tài)顯示和隱藏datagrid中的某一列的方法
動態(tài)顯示和隱藏datagrid中的某一列的方法有很多,在接下來的文章中為大家介紹下jQuery是如何實現(xiàn)的2013-12-12jQuery模擬Marquee實現(xiàn)無縫滾動效果完整實例
這篇文章主要介紹了jQuery模擬Marquee實現(xiàn)無縫滾動效果,結(jié)合完整實例形式分析了jQuery針對圖片與文字的無縫滾動效果實現(xiàn)技巧,需要的朋友可以參考下2016-09-09JQuery Mobile實現(xiàn)導(dǎo)航欄和頁腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成,通常位于頁眉或頁腳內(nèi)部。本文給大家介紹JQuery Mobile實現(xiàn)導(dǎo)航欄和頁腳的相關(guān)知識,需要的朋友參考下吧2016-03-03