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);//將返回值填充至頁(yè)面中 
}); 
}); 

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

jquery插件qrcode在線生成二維碼
jquery.qrcode是一個(gè)強(qiáng)大的jquery的插件,可以用來(lái)二維碼圖形的渲染,用于生成二維碼,非常的實(shí)用，需要的朋友參考下。
2015-04-04
jQuery Ajax()方法使用指南
jQuery.ajax()功能比較強(qiáng)大，可配置的參數(shù)比較多，本文主要對(duì)這個(gè)方法的注意事項(xiàng)進(jìn)行總結(jié)。有相同需求的童鞋們也來(lái)仔細(xì)看看吧，希望對(duì)大家能有所幫助
2014-11-11
使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法
這篇文章主要介紹了使用jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的方法,較為詳細(xì)的分析了jQueryMobile實(shí)現(xiàn)滑動(dòng)翻頁(yè)效果的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
zTree jQuery 樹(shù)插件的使用(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇zTree jQuery 樹(shù)插件的使用(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
jQuery1.3.2 升級(jí)到j(luò)Query1.4.4需要修改的地方
jQuery1.3.2 升級(jí)到 1.4.4 ，需要修改的地方，需要的朋友可以參考下。
2011-01-01
jquery對(duì)元素拖動(dòng)排序示例
對(duì)元素進(jìn)行拖動(dòng)排序的實(shí)現(xiàn)方法有很多，在本文為大家介紹下使用jquery來(lái)完成這個(gè)工作，希望對(duì)大家有所幫助
2014-01-01
jQuery繼承extend用法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery繼承extend用法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery Ajax文件上傳(php)
今我在網(wǎng)上找了好久喲。。。才找到JQUERY方式的異步文件上傳，趕緊記了下來(lái)。
2009-06-06
jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼,可實(shí)現(xiàn)幻燈片切換顯示時(shí)標(biāo)題同步逐個(gè)打印顯示的效果,涉及jQuery操作json格式數(shù)據(jù)及時(shí)間函數(shù)的相關(guān)技巧,需要的朋友可以參考下
2015-11-11
談?wù)刯Query Ajax用法詳解
jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn) $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性，本文給大家介紹jquery ajax用法詳解，感興趣的朋友一起學(xué)習(xí)吧
2015-11-11