jQuery+json+servlet小例子

csdnxpw

2011-06-08

1、引入jar包：gson-1.7.1（google提供的json解决方案），下载网站：http://code.google.com/p/google-gson/

2、引入jQuery的js包

3、代码

1）客户端代码（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 'json.jsp' starting page</title>
		<!-- 去除浏览器缓存 -->
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
		<!-- -->
		<script type="text/javascript">
			$(document).ready(function() {
				$("#btn1").click(function() {
					$.post(
						"JsonServlet", 
						{"name":"张三"},
						function(Date){
							//alert(Date);
							var html = "<table><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr><td>"+Date.id+"</td><td>"+Date.name+"</td><td>"+Date.age+"</td><td>"+Date.address+"</td></tr></table>";
							$("#show").html(html);
						}, 
						"json"
					);
				});
			});
		</script>
	</head>

	<body>
		<input id="btn1" type="button" value="click me" />
		<div id="show"></div>
	</body>
</html>

2）服务器端代码（实体类Person）

package com.yjw.pojo;

public class Person {
	private int id;
	private String name;
	private int age;
	private String address;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
}

3）服务器端代码（servlet代码）

package com.yjw.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 com.google.gson.Gson;
import com.yjw.pojo.Person;

public class JsonServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		Person person = new Person();
		person.setId(1);
		person.setName("张三");
		person.setAge(20);
		person.setAddress("suzhou");
		
		Gson gson = new Gson();
		String result = gson.toJson(person);
		//System.out.println(result);
		//服务器返回类型设置为json格式
		resp.setContentType("application/json; charset=utf-8");
		//清缓存
		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");
		//服务器响应
		PrintWriter out = resp.getWriter();
		out.print(result);
		out.close();
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doGet(req, resp);
	}
}

4）web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name></display-name>

	<!-- Servlet在web.xml中的配置 -->
	<servlet>
		<servlet-name>JsonServlet</servlet-name>
		<servlet-class>com.yjw.servlet.JsonServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>JsonServlet</servlet-name>
		<url-pattern>/JsonServlet</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

gson