jQuery中驗證表單提交方式及序列化表單內容的實作_jquery

先前專案中使用的表單提交方式

使用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項目是否全部有值
},
success : function(data) {
var obj = jQuery.parseJSON(data);//將傳回的JSON轉換為所需物件（ResponseData）
if (!obj.success) {//判斷傳回的ResponseData物件中標示狀態的屬性值
$.messager.show({
title:'提示',msg:'儲存失敗',
showType:'fade',style:{right:'',bottom:''}
});
} else {
$.messager.show({
title:'提示',msg:'保存成功',
showType:'fade',style:{right: '',bottom:''}
});
$("#addWin").window("close");//關閉提交pwkk
query();//刷新結果集
}
}
});
}

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

複製程式碼 程式碼如下:

$("#btn").c(lick function() {
$.get("get.php", {u​​sername:$("#username").val(), password:$("#password").val()}, function(data , textStatus) {//將表單中的資料逐條取出後封裝上傳
$("#target").html(data);//將回傳值填入頁面
});
});

而後有簡化版，使用serialize()方法序列化

複製程式碼

複製程式碼

複製程式碼

程式碼如下:


$("#btn").click(function() {
$.get("get.php", $("#form").serialize( ), function(data, textStatus) {//將表單中的資料逐條取出後封裝上傳
$("#target").html(data);//將回傳值填入頁面
} );
}); serialize()方法可以自動編碼，而且除表單之外的如checkbox等物件也可以使用其進行轉換同時還有serializeArray()方法可以將元素序列化後返回數組形式的JSON對象，而非JSON字符串即無需使用jQuery.parseJSON()方法進行轉換返回值可直接使用類似$.each()等方法進行操作使用