原文：http://www.jb51.net/article/78536.htm
Form Plugin API 裏提供了很多有用的方法可以讓你輕鬆的處理表單裏的數據和表單的提交過程。
測試環境：部署到Tomcat中的web項目。
本文演示的是：jQuery form插件之ajaxForm()和ajaxSubmit()的可選參數項對象
ajaxForm()和ajaxSubmit()的可選參數項對象
ajaxForm 和 ajaxSubmit 都支持大量的可選參數，它們通過可選參數項對象傳入。可選參數項對象只是一個簡單的 JavaScript對象，裏邊包含了一些屬性和一些值:
target
用server端返回的內容更換指定的頁面元素的內容。 這個值可以用jQuery 選擇器來表示, 或者是一個jQuery 對象， 一個 DOM 元素。
缺省值： null
url
表單提交的地址。
缺省值： 表單的action的值
type
表單提交的方式，'GET' 或 'POST'.
缺省值： 表單的 method 的值 (如果沒有指明則認爲是 'GET')
beforeSubmit
表單提交前執行的方法。這個可以用在表單提交前的預處理，或表單校驗。如果'beforeSubmit'指定的函數返回false，則表單不會被提交。 'beforeSubmit'函數調用時需要3個參數：數組形式的表單數據，jQuery 對象形式的表單對象，可選的用來傳遞給ajaxForm/ajaxSubmit 的對象。
數組形式的表單數據是下面這樣的格式：[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
缺省值： null
success
當表單提交後執行的函數。 如果'success' 回調函數被指定，當server端返回對錶單提交的響應後，這個方法就會被執行。 responseText 和 responseXML 的值會被傳進這個參數 (這個要依賴於dataType的類型).
缺省值： null
dataType
指定服務器響應返回的數據類型。其中之一: null, 'xml', 'script', 或者 'json'. 這個 dataType 選項用來指示你如何去處理server端返回的數據。 這個和 jQuery.httpData 方法直接相對應。
下面就是可以用的選項：
'xml': 如果 dataType == 'xml' 則 server 端返回的數據被當作是 XML 來處理， 這種情況下'success'指定的回調函數會被傳進去 responseXML 數據
'json': 如果 dataType == 'json' 則server端返回的數據將會被執行，並傳進'success'回調函數
'script': 如果 dataType == 'script' 則server端返回的數據將會在上下文的環境中被執行
缺省值： null
semantic
一個布爾值，用來指示表單裏提交的數據的順序是否需要嚴格按照語義的順序。一般表單的數據都是按語義順序序列化的，除非表單裏有一個type="image"元素. 所以只有當表單裏必須要求有嚴格順序並且表單裏有type="image"時才需要指定這個。
缺省值： false
resetForm
布爾值，指示表單提交成功後是否需要重置。
缺省值： null
clearForm
布爾值，指示表單提交成功後是否需要清空。
缺省值： null
iframe
布爾值，用來指示表單是否需要提交到一個iframe裏。 這個用在表單裏有file域要上傳文件時。更多信息請參考 代碼示例 頁面裏的File Uploads 文檔。
缺省值： false
一、引入依賴的js
|
1
2
|
<script
src="jquery-1.3.1.js"
type="text/javascript"></script>
<script
src="jquery.form.js"
type="text/javascript"></script>
|
網盤下載：https://yunpan.cn/crjzfmXqaTu9e 訪問密碼 e3bc
二、編寫頁面
|
1
2
3
4
5
6
7
8
|
<!--
demo1 -->
<form
id="myForm"
action="ajax2.jsp"
method="post">
名稱：
<input type="text"
name="name"
/> <br/>
地址：
<input type="text"
name="address"
/><br/>
自我介紹：
<textarea name="comment"></textarea>
<br/>
<input
type="submit"
id="test"
value="提交"
/> <br/>
<div
id="output1"
></div>
</form>
|
三、調用方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script
type="text/javascript">
$(document).ready(function()
{
var
options = {
target:
'#output1',
beforeSubmit:
showRequest,
success:
showResponse,
resetForm:
true
};
$('#myForm').ajaxForm(options);
});
function
showRequest(formData, jqForm, options) {
var
queryString = $.param(formData);
alert(queryString);
return
true;
}
function
showResponse(responseText, statusText) {
alert('狀態:
'
+ statusText + '\n
返回的內容是: \n'
+ responseText);
}
</script>
|
四、詳細代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery
form插件的使用--ajaxForm()和ajaxSubmit()的可選參數項對象. </title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8"
/>
<script
src="jquery-1.3.1.js"
type="text/javascript"></script>
<script
src="jquery.form.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function()
{
var
options = {
target:
'#output1',
beforeSubmit:
showRequest,
success:
showResponse,
resetForm:
true
};
$('#myForm').ajaxForm(options);
});
function
showRequest(formData, jqForm, options) {
var
queryString = $.param(formData);
alert(queryString);
return
true;
}
function
showResponse(responseText, statusText) {
alert('狀態:
'
+ statusText + '\n
返回的內容是: \n'
+ responseText);
}
</script>
</head>
<body>
<h3>
Demo 4 : jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可選參數項對象. </h3>
<!--
demo1 -->
<form
id="myForm"
action="ajax2.jsp"
method="post">
名稱：
<input type="text"
name="name"
/> <br/>
地址：
<input type="text"
name="address"
/><br/>
自我介紹：
<textarea name="comment"></textarea>
<br/>
<input
type="submit"
id="test"
value="提交"
/> <br/>
<div
id="output1"
></div>
</form>
</body>
</html>
|
新建一個ajax2.jsp文件：
|
1
2
3
4
5
6
7
8
9
|
<%@
page language="java"
import="java.util.*"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String
name = request.getParameter("name");
String
address = request.getParameter("address");
String
comment = request.getParameter("comment");
System.out.println(name
+ "
- "
+address + "
- "
+comment);
out.println(name
+ "
"
+address + "
"
+comment);
%>
|
五、測試效果：
填寫數據：
提交表單的內容：
![]()
從服務器返回的數據：
![]()
