jQuery表单插件 -- jQuery Form 插件的使用 -

wltjack

浏览: 40693 次
性别:
来自: 成都

最近访客更多访客>>

dkl187788

wangyy

hyla_bob

epichust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery表单插件 -- jQuery Form 插件的使用

博客分类：

jQuery

jQuery插件的使用 ajax

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/>"+"数据已经成功提交！");
		
	}

后台接收传过来的用户名，然后作出响应。

访问页面输入信息，点击提交后可以看到整个页面并没有刷新，并且将服务器端的响应信息显示到了页面的对应位置。如图：