回答

3

jQuery表單插件提供了與表單一起使用ajax的簡單性。它將使用表單屬性來確定如何以及在何處提交表單。表單的方法屬性告訴插件要使用的請求類型。表單的action屬性告訴它在哪裏提交表單。

考慮一個實例的形式是這樣的:

<form id="myform" action="submit.php" method="post"> 
<!--inputs and submit button go here--> 
</form> 

在本質上它可以讓你寫:

$('#myform').ajaxForm(); 

代替

$.post("submit.php", $("#myform").serialize()); 

jQuery的表格插件也將讓您通過Ajax從您的代碼提交。

$('#myform').ajaxSubmit(); 

jQuery的形式插件無論如何都會序列化的形式,你將不得不序列提交到服務器之前。 jQuery Form Plugin只是在後臺序列化表單。上述示例不處理來自服務器的任何響應。
使用下面的代碼,您可以將響應追加到類屬性包含「result」的元素。

$('#myform').ajaxForm({ target : ".result"}); 

您可以使用jQuery支持的任何選擇器作爲目標選項。

我不確定您是否可以使用延期方法。我對此表示懷疑,因爲兼容性適用於1.3.2以上版本,並且本地ajax方法被封裝在插件中。這樣Deferred對象永遠不會從插件內部返回。

jQuery表單確實有一個可以使用的beforeSubmit選項。因此,添加到上面的代碼,我們得到:

$('#myform').ajaxForm({ target: ".result", beforeSubmit: function(arr, $form, options) { 
     // arr: The array of form data 
     // The array of form data takes the following form: 
     // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

     //some code to check if we already submitted the form 

     // return false to cancel submit     
    } 
}); 

但是,我會建議不要這樣做,如果用戶完成提交表單後的頁面。它只會增加您的客戶端代碼的不必要的複雜性。如果用戶在表單提交後在頁面上做其他事情,應該可以。 jQuery Forms Plugin具有成功選項,如果服務器返回200「OK」響應,則會調用函數回調。您還可以查看插件http://jquery.malsup.com/form/的作者網站了解更多插件信息。

0

形式插件是在有用的,你可以在一個呼叫,提交一個表單阿賈克斯用相同的選項能力,作爲$就優惠。這是一種簡單地劫持界面以增強其行爲的好方法。這也很好,因爲它可以通過人造ajax(iframe)順利處理文件上傳,而無需修改任何內容。

據我所知,表單插件本身並沒有做任何事情來避免多次提交。我在一個非常大的項目上使用插件來處理各種事情,而且我通常會通過一些附加代碼來處理這個問題,以跟蹤表單是否處於中間提交狀態,並且如果是,請避免輸入函數再次提交。

1

當任務與序列化和提交表單一樣簡單時,您不需要專門的表單插件。插件可以包含您可能永遠不會使用或需要的所有功能。另外,如果你對jQuery的知識是有限的,或者你不太瞭解如何創建插件,那麼以你需要的方式定製它並不是一件容易的事情。我選擇一個插件的任務太複雜了,在這種情況下,爲什麼重新發明輪子,如果已經有插件的話。一個例子是帶有HSB控件的顏色選擇器。如果你不知道顏色是如何工作的,那麼做研究和創建自己的顏色選擇器的時間和精力就會超過最高。

您可以使用以下2行作爲序列化和提交表單的基本方法。

var data = $(form).serialize(); 
$.post('post.php', '&'+data); 

瞭解更多關於$。員額()在http://api.jquery.com/jQuery.post/#example-3

現在,如果你覺得你需要做複雜的事情與你的形式與這些功能已經在一些插件可用,那麼它不會傷害到試試看看它是如何爲你工作的。

3

我剛剛看過表格插件,說實話,如果你有一點使用jQuery的經驗,沒有理由使用插件。我沒有看到任何你不能通過簡單的方式使用普通的jQuery來完成的任何事情。 如果我需要使用ajax發送我的完整表單數據,我使用序列化。

這就是基本的ajax調用需要的所有東西,插件可以做些什麼來簡化這個過程?

$.ajax({ 
    type: 'POST', 
    url: post/to/this/url, 
    data: $("#myForm").serializeArray(), 
    success: function() { 
    // Woopie success! 
    window.location.href = successurl; 
    }, 
    error: function(jqXHR, textStatus, errorThrown){ 
    // do something with errors 
    } 
}); 
+2

怎麼樣上傳文件? – psousa 2011-03-09 10:08:14

+0

我猜,除非你需要這些額外的方法和文件上傳,那麼你應該使用它,否則我想這是沒有意義的。 – chobo2 2011-03-09 16:06:31

+0

還有一個好處:使用這個插件可以更輕鬆地從非Ajax形式的版本升級到帶有Ajax的版本。而且,創建Hijax場景要容易得多。 – psousa 2011-03-09 16:51:34

2

如果你想使用Ajax上傳文件,那麼這個插件是必備的。綜觀serializeArray文檔就明確指出:從文件

數據選擇元素不是序列化

這個插件處理文件上傳,沒有任何問題。