使 用AJAX提交Form表单的方法,其中主要的就是ajaxForm()和ajaxSubmit(),ajaxForm和ajaxSubmit都支持众多 的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:
Options对象的详解:
1.)target
指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。
2.)url
重写或者指定表单的'action'属性。
默认值:表单的action属性值
3.)type
重写或者指定表单的'method' 属性,"GET"或"POST"。
默认值:表单的method属性值(如果没有找到默认为“GET”)。
4.)beforeSubmit
表单提交前被调用的回调函数,该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false,那么表单将 不被提交。"beforeSubmit"回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入 ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默认值:null
5.)success
表单成功提交后调用的回调函数。如果提供"success"回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null
6.)dataType
期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定,将传回responseXML值
'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。
'script':如果dataType == 'script', 服务器响应将求值成纯文本。
默认值:null(服务器返回responseText值)
7.)semantic
布尔标志,表示数据是否必须严格按照语义顺序来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了 type="image"的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将 semantic设置为true。
默认值:false
8.)resetForm
布尔标志,表示如果表单提交成功是否进行重置。
默认值:null
9.)clearForm
布尔标志,表示如果表单提交成功是否清除表单数据。
默认值:null
10.)在$.ajax options中用到的元素都可以用在这里:
如:timeout:3000
11.)AjaxForm和AjaxSubmit区别
ajaxForm:不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit:马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ajaxForm Laboratory</title>
<link rel="stylesheet" type="text/css" href="../../common.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript"
src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript"
src="../../scripts/support.labs.js"></script>
<script type="text/javascript" src="../../scripts/jquery.form.js"></script>
<script type="text/javascript">
//1.window.onload()相似 $(function())
// $(function() { } )是在dom结构创建完成以后就执行,
// window.onload是在整个页面加载完成之后(包括页面上的资源,比如图片)才执行
$(function(){
//2. AJAX提交Form表单的方法:ajaxForm()和ajaxSubmit()
// 包含相关参数由一个Javascript的Options对象来提供,包含了如下一些属性与值的集合
var options = {
//2.表单提交后,服务器响应显示区域
target: '#responseDisplay',
//提交之前调用回调函数
beforeSubmit: function(data,set,options) {
//感觉是生成Json的函数,给ID为dataDisplay的DOM标签赋值
$('#dataDisplay').html($.toSource(data));
var disposition = $('#dispositionGroup input:radio').fieldValue()[0];
if (disposition != '') options[disposition] = true;
var optionsClone = $.extend({},options);
optionsClone.beforeSubmit = undefined;
//感觉是生成Json的函数,给ID为optionsDisplay的DOM标签赋值
$('#optionsDisplay').html($.toSource($.extend({},optionsClone),true));
return true;
}
};
//表单提交后,服务器响应更新至testForm处
$('#testForm').ajaxForm(options);
//图像相关是否表单数据串行序列化
$('#testForm').bind('form.pre.serialize',function(type,$form,options,veto) {
alert("可以在这里对提交表单的字段的内容进行一些处理,例如把passwd进行加密");
if ($('#semanticControl').fieldValue().length != 0) options.semantic = true;
});
});
</script>
<style>
#console div {
overflow: inherit;
}
#console div div {
width: 540px;
overflow: auto;
}
</style>
</head>
<body>
<h1>ajaxForm Laboratory</h1>
<fieldset>
<legend>The form</legend>
<div>
<form id="testForm" action="reflectData.jsp" method="post">
<div>
<label>Text field:</label>
<input type="text" name="text" value="some text"/>
</div>
<div>
<label>Dropdown:</label>
<select name="dropdown">
<option value="dropdown 1">One</option>
<option value="dropdown 2">Two</option>
<option value="dropdown 3" selected="selected">Three</option>
<option value="dropdown 4">Four</option>
<option value="dropdown 5">Five</option>
</select>
</div>
<div>
<label>Input image:</label>
<input type="image" name="inputImage" src="image.1.jpg" value="hibiscus blossom"/>
</div>
<div>
<label>Check box group:</label>
<input type="checkbox" name="cb" value="checkbox 1">One
<input type="checkbox" name="cb" value="checkbox 2" checked="checked">Two
<input type="checkbox" name="cb" value="checkbox 3">Three
</div>
<div>
<label>Radio group:</label>
<input type="radio" name="radio" value="radio 1">One
<input type="radio" name="radio" value="radio 2" checked="checked">Two
<input type="radio" name="radio" value="radio 3">Three
</div>
<div>
<label>Text area:</label>
<textarea name="textarea" rows="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</textarea>
</div>
<div>
<label> </label>
<input type="submit" name="submitButton" value="Submit me!"/>
</div>
</form>
</div>
</fieldset>
<fieldset>
<legend>Control Panel</legend>
<div>
<form action="" οnsubmit="return false;">
<div>
<label>Semantic order:</label>
<input type="checkbox" name="semantic" id="semanticControl"/> Check for yes
</div>
<div id="dispositionGroup">
<label>After submission:</label>
<input type="radio" name="disposition" value="1" checked="checked"/> Leave form be
<input type="radio" name="disposition" value="resetForm"/> Reset form
<input type="radio" name="disposition" value="clearForm"/> Clear form
</div>
</form>
</div>
</fieldset>
<fieldset>
<legend>Results</legend>
<div id="console">
<div>
<label>Submitted data:</label>
<div id="dataDisplay"></div>
</div>
<div>
<label>Options:</label>
<div id="optionsDisplay"></div>
</div>
<div>
<label>Response:</label>
<div id="responseDisplay"></div>
</div>
</div>
</fieldset>
</body>
</html>