jquery Form插件是一个优秀的Ajax表单插件,可以非常容易的、无侵入滴升级html表单以支持Ajax。jQUery Form有两个核心方法——ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到如何管理提交进程的功能。另外插件还有一些其它的方法:formToArray(),formSerialize(),fieldSerialize(),fieldValue(),clearFrom(),clearFialds()和resetForm()等。
下载地址:点击打开链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.form.js"></script>
</head>
<body>
<form id="form">
<input type="file" enctype="multipart/form-data" method ="post"/>
</form>
<form id="form_submit">
账号:<input type="text" name="name"/><br/>
密码:<input type="password" name="password"/><br/>
<input type="submit" id="submit_test" value="提交"/>
</form>
</body>
</html>
上述代码通过核心方法ajaxForm(),很容易将表单提升为ajax提交方式。
<script type="text/javascript">
$("#form_submit").ajaxForm(function () {
alert("登陆成功!!!");
})
</script>
form插件还有一个核心方法ajaxForm(),也能完成同样功能。
$("#form_submit").ajaxSubmit(function () {
alert("登陆成功!!!");
})
ajaxForm()方法和ajaxSubmit()方法参数
ajaxForm()方法和ajaxSubmit()方法都能接收0个或1个参数。当为单个的参数时,该参数既可以是一个回调函数,也可以是一个 options 对象。上面就是参数是回调函数的例子,下面介绍 options 对象。
首先定义一个对象 options,然后在对象里设置参数。如:
var options = {
target : "#output1", //把服务器返回的内容放入 id 为 output 的元素中
beforeSubmit : showRequest, //提交前的回调函数
success : showResponse, // 提交后的回调函数
url : url, //默认是form的action ,如果声明则会覆盖
type : type , //默认是form的method,如果声明则会覆盖
dataType : null, //'xml'、‘script’、‘json’(接受服务器端的返回类型)
clearForm : true, //成功提交后,清除所有表单元素的值
resetForm : true, //成功提交后,重置所有表单元素的值
timeout : 3000 //限制请求时间,请求大于3秒后,跳出请求
};
定义了 options对象之后,就可以把这个 options对象传给ajaxForm()方法。如
$("#form_submit").ajaxForm(aptions);
或者传递给ajaxSubmit()方法。如:
$("#form_submit").ajaxSubmit(aptions);
在 options 里指定了两个回调函数,即beforeSubmit :showRequest 和 success:showResponse.他们分别表单提交前和提交后被调用。
beforeSubmit ——提交前的回调函数
function showRequest(formData,jqForm,options){
var queryString = $.param(formData);
return true;
}
这个回调函数有3个参数。
第一个 formData 是数组对象,使用$.param()方法把爱转化为字符串,得到如下这种格式:
name=tom&address=2
需要注意的是,当表单提交时 form 插件会议ajax方式自动提交这些数据。
第二个参数 jqForm 是一个jquery对象 ,它封装了表单元素。
如果要访问 jqForm 的 DOM 元素,可以吧 jqForm 转为 DOM 对象。
var formElement = jqForm[0];
var address = formElement.address.value;
第三个参数 options 就是 option 对象。前面已经声明了 options 对象里的一些属性,其他没有声
明的,则会使用默认属性。
在这个表单中,只要不返回 false ,表单都被允许提交;如果返回 false ,则会阻止表单提交。可以利用这个特性,在表单提交之前验证数据,如果不符合验证条件,则组织表单提交。
success——提交后的回调函数
提交后的回调函数:
function showResponse(responseText,statusText,xhr,$form) {
alert("状态:"+statusText+"\n 返回内容是:\n"+responseText);
}
success 有四个参数:responseText、statusText、xhr、$form。其中 responseText 和 statusText 2个比较常用。
statusText 只是返回一个状态,例如 success error邓。
responseText 携带者服务器返回的数据内容。responseText 会根据设置的 options 对象中的 dataType 属性来返回相应格式的内容。具体情况如下:
(1):对于缺省的 HTML 返回,回掉函数的提一个参数是 XMLHttpRequest 对象的 responseText 属性。
(2):当 dataType 属性设置为 xml 时,回掉函数的第一个参数是 XMLHttpRequest 对象的 responseXML 属性。
$("#form_submit").ajaxForm({
dataType : 'xml',
success : processxml
});
function processxml(responseXML) {
var name = $('name',responseXML).text();
var address = $('address',responseXML).text();
}
(3):当 dataType 属性设置为 json 时,回掉函数的第一个参数是 从服务器返回的 json 数据对象。
$("#form_submit").ajaxForm({
dataType : 'json',
success : processJson
});
function processJson(data) {
$("#output1").html(data.name+" "+data.address);
}