js實例教程-Jquery提交表單 Form.js官方插件介紹

发布时间:2018-11-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js實例教程-Jquery提交表單 Form.js官方插件介紹脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。

先說說常用的Form插件,支持Ajax,支持Ajax文件上傳,功能強大,基本滿足日常應用。
1、最新jquery框架軟件包下載
jquery.js壓縮包
jquery.js非壓縮包
2、Form插件下載
form.js

3、Form插件的簡單入門
第一步:先增加一個表單
代碼:

代碼如下:


<form id=";myForm" action="comment.php" method="post">
Name: <input tyPE="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submIT" value="Submit Comment" />
</form>


第二步:jquery.js和form.js文件的包含
代碼:

. 代碼如下:


<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind &#39;myForm' and PRovide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>


3、Form插件的詳細使用方法及應用實例
https://www.malsup.COM/jquery/form/
============================
該插件的作者在介紹form.js時,說了這樣的一句話:
引用:
Submitting a form with AJAX doesn't get any easier than this!
意思是說,用Ajax來提交表單,你不可能找到比這個更容易的了。呵呵——,是否吹水,大家用過了就知道了。

表單插件API

英文原文:https://www.malsup.com/jquery/form/#api
表單插件API提供了幾個方法,讓你輕鬆管理表單數據和進行表單提交。
ajaxForm
增加所有需要的事件監聽器,為AJAX提交表單做好準備。ajaxForm不能提交表單。在document的ready函數中,使用ajaxForm來 為AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。
實例:
代碼:

. 代碼如下:


$('#myFormId').ajaxForm();
ajaxSubmit


馬上由AJAX來提交表單。大多數情況下,都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。
實例:
代碼:

. 代碼如下:


// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 為了止普通瀏覽器進行表單提交和產生頁面導航(防止頁面刷新?)返回false
return false;
});
formSerialize


將表單串行化(或序列化)成一個查詢字符串。這個方法將返回以下格式的字符串:name1=value1&amp;name2=value2。
可鏈接(Chainable):不能, 這個方法返回一個字符串。
實例:
代碼:

. 代碼如下:


VAR queryString = $('#myFormId').formSerialize();
// 現在可以使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString);
fieldSerialize


將表單的字段元素串行化(或序列化)成一個查詢字符串。當只有部分表單字段需要進行串行化(或序列化)時,這個就方便了。這個方法將返回以下格式的字符串:name1=value1&name2=value2。
可鏈接(Chainable):不能,這個方法返回一個字符串。
實例:
代碼:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
返回匹配插入數組中的表單元素值。從0.91版起,該方法將總是以數組的形式返回數據。如果元素值被判定可能無效,則數組為空,否則它將包含一個或多於一個的元素值。
可鏈接(Chainable):不能,該方法返回數組。
實例:
代碼:

. 代碼如下:


// 取得密碼輸入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm


通過調用表單元素原有的DOM方法,將表單恢復到初始狀態。
可鏈接(Chainable):可以。
實例:
代碼:
$('#myFormId').resetForm();
clearForm
清除表單元素。該方法將所有的文本(text)輸入字段、密碼(password)輸入字段和文本區域(textarea)字段置空,清除任何select元素中的選定,以及將所有的單選(radio)按鈕和多選(checkbox)按鈕重置為非選定狀態。
可鏈接(Chainable):可以。
代碼:
$('#myFormId').clearForm();
clearFields
清除字段元素。只有部分表單元素需要清除時才方便使用。
可鏈接(Chainable):可以。
代碼:
$('#myFormId .specialFields').clearFields();
Options對象
ajaxForm和ajaxSubmit都支持眾多的選項參數,這些選項參數可以使用一個Options對象來提供。Options只是一個JavaScript對象,它包含了如下一些屬性與值的集合:
target
指明頁面中由服務器響應進行更新的元素。元素的值可能被指定為一個jQuery選擇器字符串,一個jQuery對象,或者一個DOM元素。
默認值:null。
url
指定提交表單數據的URL。
默認值:表單的action屬性值
type
指定提交表單數據的方法(method):“GET”或“POST”。
默認值:表單的method屬性值(如果沒有找到默認為“GET”)。
beforeSubmit
表單提交前被調用的回調函數。“beforeSubmit”回調函數作為一個鉤子(hook),被提供來運行預提交邏輯或者校驗表單數據。如果 “beforeSubmit”回調函數返回false,那麼表單將不被提交。“beforeSubmit”回調函數帶三個調用參數:數組形式的表單數 據,jQuery表單對象,以及傳入ajaxForm/ajaxSubmit中的Options對象。表單數組接受以下方式的數據:
代碼:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默認值:null
success
表單成功提交后調用的回調函數。如果提供“success”回調函數,當從服務器返迴響應后它被調用。然後由dataType選項值決定傳回responseText還是responseXML的值。
默認值:null
dataType
期望返回的數據類型。null、“xML”、“script”或者“json”其中之一。dataType提供一種方法,它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',將把服務器響應作為XML來對待。同時,如果“success”回調方法被指定, 將傳回responseXML值。
'json':如果dataType == 'json', 服務器響應將被求值,並傳遞到“success”回調方法,如果它被指定的話。
'script':如果dataType == 'script', 服務器響應將求值成純文本。
(譯註:上面一些地方鬼佬說的不清不楚,只好意譯了,希望能夠表達原意。)
默認值:null(服務器返回responseText值)
SEMantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布爾標誌,表示數據是否必須嚴格按照語義順序(slower?)來進行提交。注意:一般來說,表單已經按照語義順序來進行了串行化(或序列化),除了 type="image"的input元素。如果你的服務器有嚴格的語義要求,以及表單中包含有一個type="image"的input元素,就應該將 semantic設置為true。(譯註:這一段由於無法理解,翻譯出來可能語不達意,但請達人指正。)
默認值:false
resetForm
布爾標誌,表示如果表單提交成功是否進行重置。
Default value: null
clearForm
布爾標誌,表示如果表單提交成功是否清除表單數據。
默認值:null
實例:
代碼:
[/code]
// 準備好Options對象
var options = {
target: '#pToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// 將options傳給ajaxForm
$('#myForm').ajaxForm(options);
[/code]
注意:Options對象還可以用來將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它們來將Options對象傳遞給ajaxForm和ajaxSubmit。

先說說常用的Form插件,支持Ajax,支持Ajax文件上傳,功能強大,基本滿足日常應用。
1、最新JQuery框架軟件包下載
jquery.js壓縮包
jquery.js非壓縮包
2、Form插件下載
form.js

3、Form插件的簡單入門
第一步:先增加一個表單
代碼:

代碼如下:


<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>


第二步:jquery.js和form.js文件的包含
代碼:

. 代碼如下:


<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>


3、Form插件的詳細使用方法及應用實例
https://www.malsup.com/jquery/form/
============================
該插件的作者在介紹form.js時,說了這樣的一句話:
引用:
Submitting a form with AJAX doesn't get any easier than this!
意思是說,用Ajax來提交表單,你不可能找到比這個更容易的了。呵呵——,是否吹水,大家用過了就知道了。

表單插件API

英文原文:https://www.malsup.com/jquery/form/#api
表單插件API提供了幾個方法,讓你輕鬆管理表單數據和進行表單提交。
ajaxForm
增加所有需要的事件監聽器,為AJAX提交表單做好準備。ajaxForm不能提交表單。在document的ready函數中,使用ajaxForm來 為AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。
實例:
代碼:

. 代碼如下:


$('#myFormId').ajaxForm();
ajaxSubmit


馬上由AJAX來提交表單。大多數情況下,都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既可以是一個回調函數,也可以是一個Options對象。
可鏈接(Chainable):可以。
實例:
代碼:

. 代碼如下:


// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 為了防止普通瀏覽器進行表單提交和產生頁面導航(防止頁面刷新?)返回false
return false;
});
formSerialize


將表單串行化(或序列化)成一個查詢字符串。這個方法將返回以下格式的字符串:name1=value1&name2=value2。
可鏈接(Chainable):不能, 這個方法返回一個字符串。
實例:
代碼:

. 代碼如下:


var queryString = $('#myFormId').formSerialize();
// 現在可以使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString);
fieldSerialize


將表單的字段元素串行化(或序列化)成一個查詢字符串。當只有部分表單字段需要進行串行化(或序列化)時,這個就方便了。這個方法將返回以下格式的字符串:name1=value1&name2=value2。
可鏈接(Chainable):不能,這個方法返回一個字符串。
實例:
代碼:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
返回匹配插入數組中的表單元素值。從0.91版起,該方法將總是以數組的形式返回數據。如果元素值被判定可能無效,則數組為空,否則它將包含一個或多於一個的元素值。
可鏈接(Chainable):不能,該方法返回數組。
實例:
代碼:

. 代碼如下:


// 取得密碼輸入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm


通過調用表單元素原有的DOM方法,將表單恢復到初始狀態。
可鏈接(Chainable):可以。
實例:
代碼:
$('#myFormId').resetForm();
clearForm
清除表單元素。該方法將所有的文本(text)輸入字段、密碼(password)輸入字段和文本區域(textarea)字段置空,清除任何select元素中的選定,以及將所有的單選(radio)按鈕和多選(checkbox)按鈕重置為非選定狀態。
可鏈接(Chainable):可以。
代碼:
$('#myFormId').clearForm();
clearFields
清除字段元素。只有部分表單元素需要清除時才方便使用。
可鏈接(Chainable):可以。
代碼:
$('#myFormId .specialFields').clearFields();
Options對象
ajaxForm和ajaxSubmit都支持眾多的選項參數,這些選項參數可以使用一個Options對象來提供。Options只是一個JavaScript對象,它包含了如下一些屬性與值的集合:
target
指明頁面中由服務器響應進行更新的元素。元素的值可能被指定為一個jQuery選擇器字符串,一個jQuery對象,或者一個DOM元素。
默認值:null。
url
指定提交表單數據的URL。
默認值:表單的action屬性值
type
指定提交表單數據的方法(method):“GET”或“POST”。
默認值:表單的method屬性值(如果沒有找到默認為“GET”)。
beforeSubmit
表單提交前被調用的回調函數。“beforeSubmit”回調函數作為一個鉤子(hook),被提供來運行預提交邏輯或者校驗表單數據。如果 “beforeSubmit”回調函數返回false,那麼表單將不被提交。“beforeSubmit”回調函數帶三個調用參數:數組形式的表單數 據,jQuery表單對象,以及傳入ajaxForm/ajaxSubmit中的Options對象。表單數組接受以下方式的數據:
代碼:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默認值:null
success
表單成功提交后調用的回調函數。如果提供“success”回調函數,當從服務器返迴響應后它被調用。然後由dataType選項值決定傳回responseText還是responseXML的值。
默認值:null
dataType
期望返回的數據類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法,它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',將把服務器響應作為XML來對待。同時,如果“success”回調方法被指定, 將傳回responseXML值。
'json':如果dataType == 'json', 服務器響應將被求值,並傳遞到“success”回調方法,如果它被指定的話。
'script':如果dataType == 'script', 服務器響應將求值成純文本。
(譯註:上面一些地方鬼佬說的不清不楚,只好意譯了,希望能夠表達原意。)
默認值:null(服務器返回responseText值)
semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布爾標誌,表示數據是否必須嚴格按照語義順序(slower?)來進行提交。注意:一般來說,表單已經按照語義順序來進行了串行化(或序列化),除了 type="image"的input元素。如果你的服務器有嚴格的語義要求,以及表單中包含有一個type="image"的input元素,就應該將 semantic設置為true。(譯註:這一段由於無法理解,翻譯出來可能語不達意,但請達人指正。)
默認值:false
resetForm
布爾標誌,表示如果表單提交成功是否進行重置。
Default value: null
clearForm
布爾標誌,表示如果表單提交成功是否清除表單數據。
默認值:null
實例:
代碼:
[/code]
// 準備好Options對象
var options = {
target: '#pToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// 將options傳給ajaxForm
$('#myForm').ajaxForm(options);
[/code]
注意:Options對象還可以用來將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它們來將Options對象傳遞給ajaxForm和ajaxSubmit。

覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-Jquery提交表單 Form.js官方插件介紹全部内容,希望文章能够帮你解决js實例教程-Jquery提交表單 Form.js官方插件介紹所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。