用jQuery和Json實現Ajax異步請求
阿新 • • 發佈：2017-09-17
登錄 iter() pat pass dtd tran java encoding find
這裏有兩個例子，一個是關於登錄驗證的，一個是異步加載數據的
1、regist.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP ‘regist.jsp‘ starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires"content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#username").blur(function(){ $.ajax({ url:"checkUsername", data:{"name":$("#username").val()}, success:function(data){ //alert(data); var src = eval("("+data+")"); $("#sty").html(src.msg); } }); }); $(":button").click(function(){ $.ajax({ url:"findAll", success:function(data){ $("tr").remove("tr:not(:eq(0))"); //alert(data); var src = eval("("+data+")"); var table = $("table"); for(var i=0;i<src.length;i++){ //alert(src[i].name); var tr = $("<tr></tr>"); var cell1 = $("<td>"+src[i].name+"</td>"); var cell2 = $("<td>"+src[i].sex+"</td>"); var cell3 = $("<td>"+src[i].age+"</td>"); cell1.appendTo(tr); cell2.appendTo(tr); cell3.appendTo(tr); tr.appendTo(table); } } }); }); }); </script> </head> <body> <form action="registAction"> 用戶名:<input type="text" name="username" id="username"/><span id="sty"></span><br/> 密碼:<input type="password" name="pwd" id="pwd"/><br/> <input type="submit" value="註冊"/> </form> <input type="button" value="查看全部"/><br/> <table> <tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> </table> </body> </html>
2、導入JSON的必須包
3、CheckUsername.java
package com.cn.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class CheckUsername extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("name"); /* * json格式 * {"name":"jack","age":"18"} */ //String msg = ""; //創建json對象 JSONObject job = new JSONObject(); if(username.equals("jack")){ //msg = "{\"msg\":\"當前用戶已存在不可註冊\"}"; job.put("msg", "當前用戶已存在不可註冊"); }else{ //msg = "{\"msg\":\"當前用戶可註冊\"}"; job.put("msg", "當前用戶可註冊"); } //out.print(msg); out.print(job); out.flush(); out.close(); } }
4、User.java
package com.cn.pojo; public class User { private String name; private String sex; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public User() { super(); // TODO Auto-generated constructor stub } public User(String name, String sex, int age) { super(); this.name = name; this.sex = sex; this.age = age; } }
5、FindAll.java
package com.cn.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class FindAll extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); //json數組 //[{"name":"jack","sex":"男","age":"18"},{"name":"lily","sex":"女","age":"17"},{"name":"tom","sex":"男","age":"18"}] //json對象 JSONObject obj1 = new JSONObject(); obj1.put("name", "jack"); obj1.put("sex", "男"); obj1.put("age", "18"); JSONObject obj2 = new JSONObject(); obj2.put("name", "lily"); obj2.put("sex", "女"); obj2.put("age", "17"); JSONObject obj3 = new JSONObject(); obj3.put("name", "tom"); obj3.put("sex", "男"); obj3.put("age", "18"); //創建json數組 JSONArray ja = new JSONArray(); ja.add(obj1); ja.add(obj2); ja.add(obj3); out.print(ja); out.flush(); out.close(); } }
用jQuery和Json實現Ajax異步請求