后端开发基础-Ajax学习-003——JSON对象在Ajax中使用

Ajax中如何使用JSON对象类型

演示案例 

演示工程目录结构

案例思路图： 

案例所需代码文件：demo3.html、 LoadCityServlet.java

demo3.html

web.xml 

  ajaxcase-day01
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp
  
  
  
  	helloServlet
  	com.servlet.HelloServlet
  
  
  	helloServlet
  	/hello.do
  
  
  
  	checkservlet
  	com.servlet.CheckServlet
  
  
  	checkservlet
  	/check.do
  
  
  
  	loadcityservlet
  	com.servlet.LoadCityServlet
  
  
  	loadcityservlet
  	/loadcities.do
  

LoadCityServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.entity.City;

import net.sf.json.JSONArray;

public class LoadCityServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			System.out.println("进入LoadCityServlet...");
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			
			//out.print("1:北京;2:上海;3:深圳");//【1】
			//[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"天津"}]
//			String data = 
//			"[{\"id\":1,\"name\":\"北京\"},"
//		   + "{\"id\":2,\"name\":\"上海\"},"
//		   + "{\"id\":3,\"name\":\"天津\"}]";//【2】
//			System.err.println(data);
//			out.print(data);
			
			//获取数据
			List list = getCities();
			//将数据转成JSON字符串
			JSONArray jsonObj = JSONArray.fromObject(list);
			System.out.println(jsonObj);//控制台显示
			out.print(jsonObj.toString());//给Ajax对象返回.【3】
			out.close();
	}

	private List getCities() {
		
		List list = new ArrayList();
		City c1  = new City(1,"北京");
		City c2  = new City(2,"上海");
		City c3  = new City(3,"广州");
		City c4  = new City(4,"深圳");
		list.add(c1);
		list.add(c2);
		list.add(c3);
		list.add(c4);
		return list;
	}
	
	

}

启动Tomcat 运行 ajaxcase-day01工程， 录入请求http://localhost:8088/ajaxcase-day01/demo3.html

========================
学会Ajax（XMLHttpRequest）+Servlet(json-lib包)+JSON应用
练习任务：
任务一：采用Ajax+Servlet+JSON技术实现部门下拉列表显示
任务二：（扩展）,利用MyBatis实现DAO，跟DB数据库连接,
           提取数据表数据。