jsp+ajax+servlet+jquery从后台取json数据示例
<span style="font-size:18px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=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 'index.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="<%=path%>/js/jquery.min.js" ></script> <script type="text/javascript"> function sub(){ $.ajax({ dataType:"json", //数据类型为json格式 contentType: "application/x-www-form-urlencoded; charset=utf-8", type:"GET", url:"/ajaxTest/TestServlet", statusCode: {404: function() { alert('page not found'); } }, success:function(data,textStatus){ $("#sp").html("<table border='1'><tr><td>序号</td><td>姓名</td><td>年龄</td></tr>"+ "<tr><td>"+data.people[0].id+"</td><td>"+data.people[0].name+"</td><td>"+data.people[0].age+"</td>"+ "<tr><td>"+data.people[1].id+"</td><td>"+data.people[1].name+"</td><td>"+data.people[1].age+"</td></tr></table>"); } }); } </script> </head> <body> This is my JSP page. <br> <input type="button" value="点击获取结果" id="btn" onclick="sub()"> <br> result : <span id="sp"></span> </body> </html>
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 javax.xml.ws.Dispatch; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; public class TestServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; /** * Constructor of the object. */ public TestServlet() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); //json在这里存放的是数组信息 JSONObject json=new JSONObject(); JSONArray array=new JSONArray(); //两个数据 JSONObject temp1=new JSONObject(); JSONObject temp2=new JSONObject(); try { //第一个name和sex temp1.put("id", 1); temp1.put("name", "张三"); temp1.put("age", "23"); array.put(0,temp1); //第二个name和sex temp2.put("id", 2); temp2.put("name", "李四"); temp2.put("age", "33"); array.put(1,temp2); //添加到json中 json.put("people", array); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } //向前台的页面输出结果 PrintWriter out=response.getWriter(); out.println(json); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text"); PrintWriter out = response.getWriter(); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>ajaxTest</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <description></description> <display-name>TestServlet</display-name> <servlet-name>TestServlet</servlet-name> <servlet-class>TestServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/TestServlet</url-pattern> </servlet-mapping> </web-app>
项目结构：
执行结果：
备注:项目完整代码下载链接：
http://download.csdn.net/download/brunome/9804917
