jQuery插件之Form

1.准备工作

 

 

jQuery核心库文件:jquery-1.8.2.js

 

jquery form 库文件:jquery.form.js

 

2.html

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery-form Demo</title>

<!-- 需要导入的就jQuery类库 -->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<!-- JS文件 -->
<script type="text/javascript" src="index.js"></script>

</head>
<body>
	<form action="" id="myForm" method="post">
		<table border="1" width="70%">
			<tr>
				<td>姓名:</td>
				<td>
					<input type="text" name="name" id="name" />
				</td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="m" checked="checked" />男 
					<input type="radio" name="gender" value="f" />女
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" id="submit" value="提交" />
					<input type="button" id="test" value="重置" /> <!-- id=reset不可以 --> 
					<input type="button" id="clear" value="清除" />
				</td>
			</tr>
		</table>
	</form>
	<div id=result></div>
</body>
</html>

 

3.JS文件

 

 

$(document).ready(function() {

	// 参数设置
	var options = {
		target : "#result",
		url : "index.jsp",
		type : "post",
		// dataType:"json",
		resetForm : true,
		beforeSubmit : validate,
		success : process
	// clearForm:true,
	// timeout:3000
	};

	// 提交
	$("#myForm").ajaxForm(options);

	// 提交前(可以用来验证表单)
	function validate(formData, jqForm, options) {

		// 取得得表单元素
		var name = formData[0].value;
		// var name=jqForm[0].name.value;

		if (name == "") {
			alert("请输入姓名");
			$("#name").focus();
			return false;
		}

		// 取得参数
		var param = $("#myForm").formSerialize();
		// var param = $.param(formData);
		alert(param);

		return true;
	}

	// 提交后(取得返回信息,比如:操作成功)
	function process(data, status) {
		alert("返回的数据:" + data);
		alert("状态:" + status); // success
	}

	// 重置
	$("#test").click(function() {
		$("#myForm").resetForm();
	});

	// 清除
	$("#clear").click(function() {
		$("#myForm").clearForm();
	});
});

 

4.JSP文件

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	
	String name = request.getParameter("name");
	String gender = request.getParameter("gender");
	String str = "name="+name+",gender="+gender;
	System.out.println(str);
	out.println("操作成功");
%>

 

你可能感兴趣的:(jquery)