jQuery中驗證表單提交方式及序列化表單內容的實現(xiàn)
更新時間:2014年01月06日 16:54:56 作者:
之前項目中使用的表單提交方式,使用form()方法可以將提交事件脫離submit按鈕,綁定到任何事件中,下面有個不錯的示例大家可以參考下
之前項目中使用的表單提交方式
使用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對象中標示狀態(tài)的屬性值
$.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").click(function() {
$.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳
$("#target").html(data);//將返回值填充至頁面中
});
});
而后有一個簡化版,使用serialize()方法序列化
$("#btn").click(function() {
$.get("get.php", $("#form").serialize(), function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳
$("#target").html(data);//將返回值填充至頁面中
});
});
serialize()方法可以自動編碼,而且除表單之外的如checkbox等對象也可以使用其進行轉換
同時還有serializeArray()方法可以將元素序列化后返回數(shù)組形式的JSON對象,而非JSON字符串
即無需使用jQuery.parseJSON()方法進行轉換
返回值可直接使用類似$.each()等方法進行操作使用
使用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對象中標示狀態(tài)的屬性值
$.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").click(function() {
$.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳
$("#target").html(data);//將返回值填充至頁面中
});
});
而后有一個簡化版,使用serialize()方法序列化
復制代碼 代碼如下:
$("#btn").click(function() {
$.get("get.php", $("#form").serialize(), function(data, textStatus) {//將表單中的數(shù)據(jù)逐條取出后封裝上傳
$("#target").html(data);//將返回值填充至頁面中
});
});
serialize()方法可以自動編碼,而且除表單之外的如checkbox等對象也可以使用其進行轉換
同時還有serializeArray()方法可以將元素序列化后返回數(shù)組形式的JSON對象,而非JSON字符串
即無需使用jQuery.parseJSON()方法進行轉換
返回值可直接使用類似$.each()等方法進行操作使用
相關文章
JQuery下的Live方法和$.browser方法使用代碼
網(wǎng)站做好了,老師卻要求要3級菜單,無奈只好去做3級菜單了。這次3級菜單的思路是在原有不變的基礎上,對有3級菜單的ID,選擇進入新的一個控件。在這個新的控件里用ajax去請求其3級目錄里的東西。2010-06-06淺談jQuery的bind和unbind事件(綁定和解綁事件)
下面小編就為大家?guī)硪黄獪\談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03jQuery實現(xiàn)的個性化返回底部與返回頂部特效代碼
這篇文章主要介紹了jQuery實現(xiàn)的個性化返回底部與返回頂部特效代碼,涉及jQuery結合動畫函數(shù)響應鼠標事件動態(tài)改變頁面元素樣式的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10jQuery Ajax請求后臺數(shù)據(jù)并在前臺接收
這篇文章主要介紹了jQuery Ajax請求后臺數(shù)據(jù)并在前臺接收的相關資料,需要的朋友可以參考下2016-12-12jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D回歸直線散點效果,結合實例形式分析了jQuery基于HighCharts插件繪制直線散點圖形的具體相關操作步驟與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03