假如現(xiàn)在有這樣一個表單,是添加元素用的。
<form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用戶名</label>:<input type='text' name='uname' id='uname'><br> <label for='mobileIpt'>手機號:</label><input type='text' name='mobileIpt' id='mobileIpt'><br> <label for='birthday'>生日:</label><input type='text' name='birthday'><br> <input type='button' value='提交' onclick='addUser()'></form>
我們不想使用表單submit的方式添加這個元素,我們就想使用ajax提交。
以前我們是這樣實現(xiàn)的:
function addUser(){ var user = { uname:$("#uname").val(), mobileIpt:$("#mobileIpt").val(), birthday:$("#birthday").val() }; $.ajax({ url:'UserAdd.action', data:user, type:'post', dataType:'text', success:function(msg){ if(msg=='1'){ console.log('添加成功'); }else{ console.log('添加失敗') } } }) } 這沒有什么錯,就是獲取表單元素的值實在是太麻煩....這里只有三項,很多項的時候就廢了....
直到有一天,我發(fā)現(xiàn)了jquery的serializeArray方法
序列化表格元素 (類似 '.serialize()' 方法) 返回 JSON 數(shù)據(jù)結構數(shù)據(jù)。
注意,此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進行字符串化操作。
返回的JSON對象是由一個對象數(shù)組組成的,其中每個對象包含一個或兩個名值對——name參數(shù)和value參數(shù)(如果value不為空的話)。
我們來試試看
$('#addForm').serializeArray();//返回數(shù)據(jù)結構,是json數(shù)組,每個對像分別name和value為key,代表這個表單元素的name和value[ {"name":"uname","value":""}, {"name":"mobileIpt","value":""}, {"name":"birthday","value":""}]這個貌似用不上啊
我們使用JQuery.param()方法處理一下:
var arr = $('#addForm').serializeArray();$.param(arr);"uname=alice&mobileIpt=110&birthday=1983-05-12"嘿這下符合我們的需求了吧,雖然不是json類型,但是至少可以作為data上傳了。
這里我們可以直接在ajax的data處填上這個json數(shù)組,在jquery內(nèi)部自己調(diào)用$.param()處理的。
我們來看下jquery.param()方法的說明:
返回值:StringjQuery.param(obj,[traditional])
將表單元素數(shù)組或者對象序列化。
參數(shù)
obj,[traditional]
數(shù)組或jQuery對象會按照name/value對進行序列化,普通對象按照key/value對進行序列化。
traditional:是否使用傳統(tǒng)的方式淺層序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});"uanme=vic&mobileIpt=110&birthday=2013-11-11"
新聞熱點
疑難解答
圖片精選