天天看點

jq ajax 送出内容,jQuery通過AJAX快速送出表單資料

當表單資料項很多時,手動擷取表單項的值将變得效率低下,結合jQuery提供的函數serialize(),我們可以實作快速擷取資料并送出表單資料。

請看下面的表單:

姓名
年齡
密碼
性别

地區

和平區

南開區

西青區

河西區

愛好

電影

音樂

籃球

個人介紹

我們可以通過自定義函數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

item = arr[i].split('=');

key = item[0];

value = item[1];

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

)

和普通的表單送出的資料格式是一樣的,我們可以很友善的進行處理!