jQuery Form 插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。使用jQuery Form插件能够容易地把一个传统的表单提交方式改变为Ajax提交方式。
插件里面的两个核心方法： ajaxForm() 和 ajaxSubmit(), 能够从form组件里采集信息确定如何处理表单的提交过程。
jQuery Form 表单插件的地址为：
http://malsup.com/jquery/form/ 。
可使用于无刷新评论等场合中。
下面是一个简单的使用。
前台页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Form 插件的使用</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.form.js"></script>
<script type="text/javascript">
/** 表单提交时，将表单域的值以无刷新的方式提交到服务器端。*/
$(document).ready(function(){
/** 定义一个options对象 */
var options = {
target:'#output1', // 把服务器返回的内容放入id为output1的元素中
beforeSubmit:validate, // 提交前的回调函数
success:showResponse //, 提交过后的回调函数
//url:url, // 默认是form的action ，如果声明，则会覆盖原来的
//type:type, // 默认是form的 method ('get' or 'post')，如果声明，则会覆盖原来的
//dataType:null, // 'xml','script' or 'json' (接受服务端返回的类型)
//clearForm:true, // 成功提交后，清除所有表单元素的值
//resetForm:true, // 成功提交后，重置所有表单元素的值
//timeout:3000 // 限制请求的时间，当请求大于3秒后，跳出请求
};
// 把options对象传递给 ajaxForm()方法
$("#form1").ajaxForm(options);
});
/** 提交前的回调函数.<br/>
* formData 是数组对象，使用$.param()方法把它转化为字符串(eg: name=1&address=2) <br/>
* jqForm 是一个jQuery对象，它封装了表单的元素 <br/>
* options 就是options对象
*/
function validate(formData,jqForm,options){
// 对表单元素进行验证
/*
// 利用参数jqForm来获取相关元素的值
var form =jqForm[0]; // 得到被封装的DOM对象
if(!form.name.value||!form.address.value){
alert('用户名和地址不能为空！');
return false;
}
*/
/* 利用 fieldValue()方法，也能容易地获取到表单元素的值，得到的是一个数组集合。*/
var usernameValues = $("input[name=name]").fieldValue();
var addressValues = $("input[name=address]").fieldValue();
if(!usernameValues[0]||!addressValues[0]){ // 获取数组中的第一项
alert("用户名和地址不能为空！");
return false;
}
var queryString = $.param(formData); // 组装数据
return true;
}
/**
* 提交后的回调函数 <br/>
* @param {Object} responseText 服务器返回的数据内容，responseText会根据设置的options对象中的dataType属性来返回相应格式的内容
* @param {Object} statusText 是一个返回状态，例如：success、error 等
*/
function showResponse(responseText,statusText){
alert('状态：' + statusText + '\n 返回的内容是：\n' + responseText);
}
</script>
</head>
<body>
<form id="form1" action="<%=path %>/formAction" method="post">
<table>
<tbody>
<tr>
<td>姓名：</td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td>地址：</td>
<td><input type="text" id="address" name="address"/></td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea id="comment" name="comment"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="submitBtn" value="提交"/></td>
</tr>
<tr>
<td colspan="2">
<div id="output1"></div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
?
? 前台请求一个servlet，将表单域的值传递到服务器，进行相应的处理。
? 后台的主要代码：
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String name=req.getParameter("name");
PrintWriter out = resp.getWriter();
out.write(name+"你好！<br/>"+"数据已经成功提交！");
}
?? 后台接收传过来的用户名，然后作出响应。
?????? 访问页面输入信息，点击提交后可以看到整个页面并没有刷新，并且将服务器端的响应信息显示到了页面的对应位置。如图：
?
?
?
? 上面只是一个简单的使用，更多用法请访问官网：http://malsup.com/jquery/form/?。
?