快捷導(dǎo)航

jQuery中驗(yàn)證表單提交方式及序列化表單內(nèi)容的實(shí)現(xiàn)

更新時(shí)間：2014年01月06日 16:54:56 作者：

之前項(xiàng)目中使用的表單提交方式，使用form()方法可以將提交事件脫離submit按鈕，綁定到任何事件中，下面有個(gè)不錯(cuò)的示例大家可以參考下

之前項(xiàng)目中使用的表單提交方式

使用form()方法可以將提交事件脫離submit按鈕，綁定到任何事件中

 
function addSubmit(){ 
$('#addForm').form('submit', { 
url : _basePath + '/@Controller/@RequestMapping', 
onSubmit : function() { 
if(boolean){//放置能否提交的判斷條件 
$.messager.show({ 
title:'提示',msg:'不符合保存條件', 
showType:'fade',style:{right:'',bottom:''} 
}); 
return false;//阻止表單提交 
} 
return $('#addForm').form('validate');//判斷required項(xiàng)是否全部有值 
}, 
success : function(data) { 
var obj = jQuery.parseJSON(data);//將返回的JSON轉(zhuǎn)化為所需對(duì)象（ResponseData） 
if (!obj.success) {//判斷返回的ResponseData對(duì)象中標(biāo)示狀態(tài)的屬性值 
$.messager.show({ 
title:'提示',msg:'保存失敗', 
showType:'fade',style:{right:'',bottom:''} 
}); 
} else { 
$.messager.show({ 
title:'提示',msg:'保存成功', 
showType:'fade',style:{right:'',bottom:''} 
}); 
$("#addWin").window("close");//關(guān)閉提交pwkk 
query();//刷新結(jié)果集 
} 
} 
}); 
} 

今天在《鋒利的jQuery》中又讀到這樣一種提交方式，使用ajax封裝了表單內(nèi)容用post提交

復(fù)制代碼代碼如下:

 
$("#btn").click(function() { 
$.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳 
$("#target").html(data);//將返回值填充至頁面中 
}); 
}); 

而后有一個(gè)簡(jiǎn)化版，使用serialize()方法序列化

復(fù)制代碼代碼如下:

 
$("#btn").click(function() { 
$.get("get.php", $("#form").serialize(), function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳 
$("#target").html(data);//將返回值填充至頁面中 
}); 
}); 

serialize()方法可以自動(dòng)編碼，而且除表單之外的如checkbox等對(duì)象也可以使用其進(jìn)行轉(zhuǎn)換

同時(shí)還有serializeArray()方法可以將元素序列化后返回?cái)?shù)組形式的JSON對(duì)象，而非JSON字符串

即無需使用jQuery.parseJSON()方法進(jìn)行轉(zhuǎn)換

返回值可直接使用類似$.each()等方法進(jìn)行操作使用

您可能感興趣的文章: