JQuery 实现表单提交

来源：互联网发布：ntfs for mac 卸载失败编辑：程序博客网时间：2024/05/21 18:43

简述：

使用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 mainrequire(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);}}

效果：