1.了解serialize()與serializeArray()
serialize()序列化表單元素，用於ajax請求，
serializeArray()序列化表單元素，類似於serialize,但是返回的是json格式的對象，注意是對象返回的不是字符串,也可以用於ajax請求
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FormJson</title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <style> </style> <script type="text/javascript"> $(document).ready(function() { $("#get").click(function() { data1 = $("#myForm :text").serializeArray(); data2 = $("#myForm").serialize(); console.log(data1); console.log(JSON.stringify(data1)) console.log(data2); $.each(data1, function(i, field) { $("#results").append(field.name + ":" + field.value + " "); }); }); }); </script> </head> <body> <form id="myForm" action=""> name: <input type="text" name="FirstName" value="Bill" /><br /> sex: <input type="text" name="sex" value="man" /><br /> <select name="education"> <option value="本科">本科</option> <option value="研究生">研究生</option> </select> </form> <button id="get">序列化表單值</button> <div id="results"></div> </body> </html>
PS:
$("form").serialize(); //這一句是獲取網頁內所有表單的值
$("form#myForm");//獲取form中的myForm這個一個表單
$("#myForm：text");//獲取myForm表單中為輸入框的選項
$("#myForm：select");//獲取myForm表單中為下拉框的選項
json對象轉字符串：主流瀏覽器都支持JSON.stringify()
2.利用serialize簡單完成登陸
這部分為自己原創，也順便應付下Http老師布置的登陸任務，html頁面代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FormJson</title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <style> </style> <script type="text/javascript"> $(function(){ $("#submit").click(function() { data1 = $("#myForm").serializeArray(); //console.log(data1); data2 = JSON.stringify(data1); //console.log(data2); data3 = $("#myForm").serialize(); //console.log(data3); var str =""; jQuery.ajax({ type: 'POST', //請求方式 url:"myHandle.jsp?flags=login", dataType: "json", //預期服務器返回的數據類型 contentType: "application/x-www-form-urlencoded;charset=UTF-8", //返回給服務器時候的字符編碼 data: data3, //發送到服務器上的數據,測試了一下傳data2的話是不行的,data1與data3可以 success: function (data) { console.log(data); if (data.statusCode == 200){ //修改成功的狀態碼為200 str+='<span>恭喜您登錄成功，您的姓名是'+data.name+'</span>'; str+='<br/><span>您的密碼是'+data.password+'</span>'; $("#result").html(str); }else if(data.statusCode == 500){ $("#result").html(""); $("#loginInf").html("用戶名或者密碼輸入錯誤！"+'<br/>'); } }, error: function (data) { } }); }); }) </script> </head> <body> <form id="myForm"> <span id="loginInf"></span> 姓名: <input type="text" name="name" /><br /> 密碼： <input type="password" name="password" /><br /> </form> <button id="submit">登陸</button> <div id="result"></div> </body> </html>
<%@page contentType="text/html; charset=utf-8" import="business.jqueryForm,java.util.Enumeration,java.io.*,java.net.URLEncoder,java.util.HashMap"%> <jsp:useBean id="myHandle" class="business.jqueryForm" scope="page"></jsp:useBean> <jsp:setProperty property="*" name="myHandle"/> <% //測試使用，打印參數 Enumeration e = request.getParameterNames(); while (e.hasMoreElements()) { System.out.println(e.nextElement()); } System.out.println("flags:" + myHandle.getFlags()); //獲取處理結果 String returnStr = myHandle.getData(request, response); System.out.println("[DEBUG][returnStr]" + returnStr); //向前台輸出結果 out.println(returnStr); %>
然后dao層用到了如c3p0連接池，數據庫連接工具類，dbutils工具簡便一下開發，順便在溫習一下
package business; import java.sql.SQLException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanHandler; import org.apache.commons.dbutils.handlers.ScalarHandler; import org.json.JSONObject; import sun.org.mozilla.javascript.internal.ast.NewExpression; import com.sun.org.apache.bcel.internal.generic.NEW; public class jqueryForm { /* * 統一獲取數據的入口 */ public String getData(HttpServletRequest req, HttpServletResponse resp) throws SQLException { if ("login".equals(flags)) return Login(); return ""; } /* * 判斷是否登錄成功 */ private String Login() throws SQLException { // System.out.println(name+"...."+password); JSONObject jsonObject = new JSONObject(); QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select * from http_login where name='" + name + "' and password='" + password + "'"; jqueryForm query = qr.query(sql, new BeanHandler<jqueryForm>(jqueryForm.class)); if (query != null) { jsonObject.put("statusCode", 200); jsonObject.put("name", query.getName()); jsonObject.put("password", query.getPassword()); } else { jsonObject.put("statusCode", 500); } return jsonObject.toString(); } // 實體bean參數以及getter/setter private String name; private String password; private String flags; public String getFlags() { return flags; } public void setFlags(String flags) { this.flags = flags; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
運行效果大概是這樣的，樣式就沒管了
自己之前看黑馬機構的視頻，使用servlet+jsp完成，把用戶的信息存到cookie中了，然后再jsp頁面用el表達式和jstl標簽進行回顯登錄信息的狀態！
當然了，實現方式數不勝數， 比如還可以用ajax+servlet的方式實現，servlet的代碼我也寫了寫，上個學期自學的javaweb,順便在溫習一下。
發現自己老是忘記servlet生命周期，在改動了web.xml中的信息后，總是不記得重新將項目發布到服務器中去，有次還鬧笑話找錯找了半個小時
package business; import java.io.IOException; import java.lang.reflect.InvocationTargetException; import java.sql.SQLException; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.beanutils.BeanUtils; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.ScalarHandler; import org.json.JSONObject; @WebServlet("/jqueryForm") public class jqueryFormServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //獲取表單數據 Map<String, String[]> map = request.getParameterMap(); jqueryForm form = new jqueryForm(); //一一對應set進去（需要引入beanutils的jar包），減少一個一個的request.getParameter("")與set進去了 //注意前台name字段要與表字段一致，功能類似於jsp的usebean,setbean標簽 try { BeanUtils.populate(form,map); } catch (IllegalAccessException | InvocationTargetException e) { e.printStackTrace(); } //這里就不采用MVC模式了，懶 JSONObject jsonObject = new JSONObject(); try { String loginInfo = Login(form.getName(),form.getPassword()); jsonObject.put("statusCode", loginInfo); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonObject.toString()); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub } /* * 判斷是否登錄成功 */ private String Login(String name,String password) throws SQLException { QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select count(*) from http_login where name='" + name + "' and password='" + password + "'"; Long query = (Long) qr.query(sql, new ScalarHandler()); if (query > 0) { return "200"; } else { return "500"; } } }