|
简述：
使用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);
}
}
效果：
| 
转播
