JQuery 实现表单提交

最新推荐文章于 2025-05-28 13:16:54 发布

anialy

最新推荐文章于 2025-05-28 13:16:54 发布

阅读量9.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/anialy/article/details/8581888

JQuery 专栏收录该内容

16 篇文章

订阅专栏

简述：

使用jquery实现简单的表单提交原型，后台servlet doPost 接受，返回用户名和密码到前台（省去处理过程）

知识点：

1. jquery表单提交动作（使用了网上提供的库）

2. 还是沿用require JS的导入js包的方式，并把主入口放在main.js

库的下载地址

jquery

http://jquery.com/download/

jquery-json

http://code.google.com/p/jquery-json/

jquery form

http://jquery.malsup.com/form/#download

require js

http://requirejs.org/docs/download.html

项目结构：

代码：

main.js(包含jquery包的导入）

var loadJS = [
              "jquery",
              "jquery-form",
              "jquery-json"
              ];

require.config({
	baseUrl : "lib/js/",
	paths: {
		"jquery": "jquery-1.8.3",
		"jquery-form" : "jquery.form",
		"jquery-json" : "jquery.json-2.4.min"
	}
});


//Function In main
require(loadJS, LoginAction("./FormSubmit"));



function LoginAction(url){
	$(document).ready(function(){
		$("#loginBtn").click(function(){
			var options = {
					resetForm :false,
					url : url, 
					type : "POST",
					dataType : "json",
					success : function(data){
						alert("userName: " + data.userName + "\n"
								+ "password: " + data.pwd);//回调参数
					}
			};
			$("#loginForm").ajaxSubmit(options);
		});
	});
};

test.html

<!DOCTYPE html>
<head>
<title>MyWebProject</title>
<meta charset="utf-8" />
<link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="./lib/js/require-jquery.js"
	data-main="js/main">
	</script>

</head>
<body>
	<form 　method="post" id="loginForm" >
		<div>
			<table border="0" align="center" cellpadding="0"
				cellspacing="0">
				<tr>
				    <td>用户名：</td>
					<td><input type="text" id="userName" name="userName"></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" id="pwd" name="pwd"></td>
				</tr>
				<tr align="center">
				    <td><input type="button" id="loginBtn" value="登陆" /></td>
				    <td><input type="reset" id="resetBtn" value="重置" /></td>
				</tr>
			</table>
		</div>
</body>
</html>

后台代码：

FormSubmitServlet.java

package mwp.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.logging.Logger;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

class User{
	private String userName;
	private String pwd;
	User(){}
	User(String userName, String pwd){
		this.userName = userName;
		this.pwd = pwd;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
}

/**
 * Servlet implementation class FormSubmitServlet
 */
public class FormSubmitServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static Logger logger = Logger.getAnonymousLogger();
	private static Gson gson = new Gson(); 
	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String userName = request.getParameter("userName");
		String pwd = request.getParameter("pwd");
		String responseStr = gson.toJson(new User(userName, pwd));
		logger.info(responseStr);
		out.append(responseStr);
	}
}

效果：