简述：

使用jquery从后台获取JSON数据，显示


知识点：

1. 使用了require JS 框架

2. 用Jquery的两种方法获取后台数据

1）ajax 方法，传回的都是json数据

2）getJSON, 直接封装了一些参数{command : GetRegsiterJsonData}


项目结构：

jquery获取后台参数 jquery获取数据_html


代码：

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>
<label id="dataArea"></label>
</body>
</html>



main.js 

var loadJS = [
              "jquery",
              ];

require.config({
	baseUrl : "lib/js/",
	paths: {
		"jquery": "jquery-1.8.3.min",
	}
});


//Function In main
require(loadJS, LoadData("./Test"));


//CallWebTrendsUri
function LoadData(url){
	$(function(){
		$(document).ready(function(){
			jQuery.ajax({
				type:"GET",
				url: url + "?command=GetRegsiterJsonData",
				dataType:"json",
				global:false, 
				success: function(data){
					var jsonData = "1. 用统一的ajax方法<br/>";
					var personList = data.personList;
					for(var i=0; i<personList.length; i++){
						var name = personList[i].name;
						var age = personList[i].age;
						jsonData += "name: " + name + ", age: " + age + "<br/>";  
					}
					$("#dataArea").html(jsonData + "<br/>");  
				}
			});
			
			$.getJSON(url,
					{command: "GetRegsiterJsonData"},
					function(data){
						var jsonData = "2. 用getJSON方法<br/>";
						var personList = data.personList;
						$.each(personList, function(i){
							var name = personList[i].name;
							var age = personList[i].age;
							jsonData += "name: " + name + ", age: " + age + "<br/>";  
						});
						$("#dataArea").html($("#dataArea").html() + jsonData);  
					});    
		});
	});
};


web.xml 映射servlet

<?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" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 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>MyProjectWeb</display-name>
  <welcome-file-list>
    <welcome-file>test.html</welcome-file>
  </welcome-file-list>
  
  <context-param> 
    <param-name>log4jConfigLocation</param-name> 
    <param-value>/WEB-INF/log4j.properties</param-value> 
  </context-param> 
  
  
  <servlet>  
    <servlet-name>TestServlet</servlet-name>  
    <servlet-class>mwp.servlet.TestServlet</servlet-class>  
  </servlet>  
  
  <servlet-mapping>  
    <servlet-name>TestServlet</servlet-name>  
    <url-pattern>/Test</url-pattern>  
  </servlet-mapping>
  
</web-app>



下面是后台的servlet

TestServlet.java

package mwp.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
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 Person{  
    Person(){}  
    Person(String name, int age){  
        this.name = name;  
        this.age = age;  
    }  
    String name;  
    int age;  
}

class Register{
	String time;
	List<Person> personList;
    Register(String time){
    	this.time = time;
    	personList = new ArrayList<Person>();
    }
	void AddPerson(Person newPerson){
		this.personList.add(newPerson);
	}
}

public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private static Logger logger = Logger.getAnonymousLogger(); 
	private static Gson gson = new Gson();  


	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String command = (String)request.getParameter("command");
		logger.info("TestServlet: doGet: command: " + command);
		
		if("GetOnePersonJsonData".equals(command)){
			Person person = new Person("John", 30);  
			String personToJson = gson.toJson(person);  
			out.append(personToJson);
			logger.info("TestServlet: doGet: GetOnePersonJsonData: " + personToJson);
        }else if("GetRegsiterJsonData".equals(command)){
        	//Intialize JSON Object
        	Register register = new Register("2012/12/16");
        	Person jeremy = new Person("Jeremy", 20);
        	Person tom = new Person("Tom", 43);
        	Person mary = new Person("Mary", 33);
        	register.AddPerson(jeremy);
        	register.AddPerson(tom);
        	register.AddPerson(mary);
        	String registerToJson = gson.toJson(register);
        	//Response to frontend
        	out.append(registerToJson);
        	logger.info("TestServlet: doGet: registerToJson: " + registerToJson);
        }
	}
}


返回的JSON数据如下：

{"time":"2012/12/16","personList":[{"name":"Jeremy","age":20},{"name":"Tom","age":43},{"name":"Mary","age":33}]}




输出如下：

jquery获取后台参数 jquery获取数据_xml_02