jQuery表單外掛jQuery.form

weixin_34402090發表於2010-11-17

外掛主要的方法:

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

 

示例程式碼:

// 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!");  
    }); 
}); 


專案主頁: http://malsup.com/jquery/form/
下載地址: http://malsup.com/jquery/form/jquery.form.js
表單外掛API

英文原文:http://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

例項:

// 準備好Options物件
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success: function() {
      alert('Thanks for your comment!');
    } };

   // 將options傳給ajaxForm
$('#myForm').ajaxForm(options);


注意:Options物件還可以用來將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支援的options,你可以利用它們來將Options物件傳遞給ajaxForm和ajaxSubmit。

ajaxForm()適用於以表單提交方式處理ajax技術(需要提供表單的action、id、method,最好在表單中提供submit按鈕)它大大簡化了使用ajax技術提交表單時的資料傳遞問題,使用ajaxForm()你不需要逐個的以JavaScript的方式獲取每個表單屬性的值,並且也不需要在請求路徑後面通過url重寫的方式傳遞資料。ajaxForm()會自動收集當前表單中每個屬性的值,然後將其以表單提交的方式提交到目標url。這種方式提交資料較安全,並且使用起來更簡單,不必寫過多冗餘的JavaScript程式碼

$(document).ready(function(){

         registerForm'表單id

data回撥資料

        $('#registerForm').ajaxForm(function(data){

            alert(data);//彈出ajax請求後的回撥結果

        });

});

ajaxSubmit()適用於以事件的機制以ajax提交form表單(超連結、圖片的click事件),該方法作用與ajaxForm()類似,但它更為靈活,因為他依賴於事件機制,只要有事件存在就能使用該方法。你只需指定該form的action屬性即可,不需要提供submit按鈕。

$(document).ready(function(){

    $('#btn').click(function(){

            $('#registerForm').ajaxSubmit(function(data){

                alert(data);

            });

            return false;

    });

    });

該段程式碼作用是在表單中id為btn的按鈕click事件觸發時通過ajaxSubmit()方法以ajax技術提交表單到表單的action所指路徑

formSerialize()是將一個form中所有的表單元素以name作為key,value作為值進行序列化操作,這就需要你必須為每一個表單元素設定表單元素name屬性及填充表單元素value的值,最好也設定id方便jquery定位表單元素。若要使用此方法你必須設定表單元素name屬性及填充表單元素value的值,我在初次使用時就忘了設定name屬性,最後在同事的幫助下找了好久才發現此錯誤。

var str=$('#registerForm').formSerialize(); // registerForm為form id

alert(str);

fieldSerialize()是將form中表單元素進行序列化以name作為key,value作為值進行序列化操作,這就需要你必須為每一個表單元素設定表單元素name屬性及填充表單元素value的值。

var str=$('#username). fieldSerialize();

alert(str);

 

 

相關文章