官网:
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
1. 核心方法 -- ajaxForm() 和 ajaxSubmit()
首先要引用两个脚本文件:
然后,在脚本中用下面两段代码中的任意一个:
$(document).ready(function() { $('#myForm').ajaxForm(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); });
$(document).ready(function() { $('#myForm').submit(function() { $(this).ajaxSubmit(function() { $('#output1').html("提交成功!欢迎下次再来!").show(); }); return false; //阻止表单默认提交 }); });
通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交。
注意:ajaxSubmit()时,需要加入return false行阻止表单默认提交,否则表单将提交再次。
一直不知道ajaxForm()与ajaxSubmit()方法具体有何差异,应用时应当注意什么,有知道的朋友希望告诉我。
2. ajaxForm() 和 ajaxSubmit() 参数
ajaxForm() 和 ajaxSubmit()都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权。
$(document).ready(function() { var options = { target: '#output1', // 用服务器返回的数据 更新 id为output1的内容. beforeSubmit: showRequest, // 提交前 success: showResponse, // 提交后 //另外的一些属性: //url: url // 默认是form的action,如果写的话,会覆盖from的action. //type: type // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post'). //dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) //clearForm: true // 成功提交后,清除所有的表单元素的值. resetForm: true // 成功提交后,重置所有的表单元素的值. //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间, //当请求大于3秒后,跳出请求. //timeout: 3000 }; //'ajaxForm' 方式的表单 . $('#myForm').ajaxForm(options); //或者 'ajaxSubmit' 方式的提交. //$('#myForm').submit(function() { // $(this).ajaxSubmit(options); // return false; //来阻止浏览器提交. //}); }); // 提交前function showRequest(formData, jqForm, options) { // formdata是数组对象,在这里,我们使用$.param()方法把他转化为字符串. var queryString = $.param(formData); //组装数据,插件会自动提交数据 alert(queryString); //类似 : name=1&add=2 return true; } // 提交后function showResponse(responseText, statusText , xhr , $form) { alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); }
表单提交之前进行验证: beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交
3. 处理服务器返回类型
下面是是个完整示范,分别解析从服务器返回html/json/xml数据。
前台demo8.html:
Demo 8 : form插件的使用--dataType的其他方式.
json方式返回
xml方式返回
html方式返回
后台对应的三个JSP页面代码:
json.jsp
<%@ page contentType="text/html; charset=UTF-8"%><% String name = request.getParameter("name"); String address = request.getParameter("address"); String comment = request.getParameter("comment"); System.out.println("后台json.jsp收到:" + name); out.println("{ \"name\" : \""+name+"\" , \"address\" : \""+address+"\", \"comment\" : \""+comment+"\"}");%>
xml.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% // XML 格式返回数据,需要注意不要留有换行符等(最上面) String name = request.getParameter("xmlname"); String address = request.getParameter("xmladdress"); String comment = request.getParameter("xmlcomment"); System.out.println("后台xml.jsp收到:" + name); response.setContentType("text/xml"); out.println(" "); out.println(""); out.println(" ");%>"+name+" "); out.println(" "+address+""); out.println(""+comment+" "); out.println("
html.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% // XML 格式返回数据,需要注意不要留有换行符等(最上面) String name = request.getParameter("htmlname"); String address = request.getParameter("htmladdress"); String comment = request.getParameter("htmlcomment"); System.out.println("后台html.jsp收到:" + name); response.setContentType("text/html; charset=utf-8"); out.println("" + name + "," + address + "," + comment + "");%>