jQuery通過AJAX快速提交表單資料

標籤：style   io   ar   os   sp   for   資料   on   log   

當表單資料項目很多時，手動擷取表單項的值將變得效率低下，結合jQuery提供的函數serialize()，我們可以實現快速擷取資料並提交表單資料。

請看下面的表單：

<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>地區</td><td><select name="area"><option value="heping">和平區</option><option value="nankai">南開區</option><option value="xiqing">西青區</option><option value="hexi">河西區</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>

我們可以通過自訂函數getFormData()來擷取表單的資料，請看下面的例子：

$(function(){$(‘#submit‘).click(function(){//選取表單var form = $(‘#fm‘);//擷取表單資料var data = getFormData(form);//發送AJAX請求$.post(‘test.php‘,data,function(data){console.log(‘ok‘);});});});

getFormData()的實現很簡單：

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接收到的資料將會是：

Array(    [name] => 3241324    [age] => m_admin    [password] => 123    [sex] => male    [area] => heping    [hobby] => Array        (            [0] => movie            [1] => music        )    [intro] => 321432423)

和普通的表單提交的資料格式是一樣的，我們可以很方便的進行處理！

jQuery通過AJAX快速提交表單資料