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

Ajax中如何使用JSON对象类型

演示案例

演示工程目录结构

案例思路图：

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

demo3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ajax示例1</title>
		<script type="text/javascript">
			//创建XMLHttpRequest对象
			function createXhr(){
				var xhr = null;//存储XMLHttpRequest对象
				if(window.XMLHttpRequest){//非IE浏览器支持
					xhr = new XMLHttpRequest();
				}else{//IE
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				return xhr;
			}
			
			function sendRequest1(){
				//利用XMLHttpRequest对象发送请求
				var xhr = createXhr();
				//创建一个hello.do请求
				//open(提交方式，请求URL,同步异步);
				xhr.open("get","hello.do",true);
				//注册回调处理函数
				xhr.onreadystatechange = function(){
					if(xhr.readyState ==4&&xhr.status == 200){
						//获取服务器返回的结果
						var data = xhr.responseText;
						alert(data);
					}
				};
				
				//发送Ajax请求，get请求参数为null；
				//post请求参数是提交的数据
				xhr.send(null);
			}
			
		</script>

		<script type="text/javascript">
			function sendRequest3(){
				//发送Ajax请求
				var xhr = createXhr();
				xhr.open("get","loadcities.do",true);
				//注册回调处理函数
				xhr.onreadystatechange = function(){
					if(xhr.readyState ==4&&xhr.status==200){
						//获取服务器返回的信息（JSON对象数组字符串）
						var data = xhr.responseText;
						//将字符串转成JSON对象数组类型
						var json_data = JSON.parse(data);
						
						//循环JSON对象数组
						var city_select = document.getElementById("city");
						for(var i=0;i<json_data.length;i++){
							//json_data[i]表示{"id":1,"name":"北京"}对象
							var id = json_data[i].id;//获取id值
							var name = json_data[i].name;//获取name值
							//创建一个<option>元素
							var opt = new Option(name,id);
							//添加到<select>元素中
							city_select.options[i] = opt;
						}
					}
				};
				xhr.send(null);
			}
		</script>
	</head>
	<body onload="sendRequest3()">
		
		<select id="city">
		</select>
	</body>
</html>

web.xml

<?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" version="2.5">
  <display-name>ajaxcase-day01</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>
  	<servlet-name>helloServlet</servlet-name>
  	<servlet-class>com.servlet.HelloServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>helloServlet</servlet-name>
  	<url-pattern>/hello.do</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>checkservlet</servlet-name>
  	<servlet-class>com.servlet.CheckServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>checkservlet</servlet-name>
  	<url-pattern>/check.do</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>loadcityservlet</servlet-name>
  	<servlet-class>com.servlet.LoadCityServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>loadcityservlet</servlet-name>
  	<url-pattern>/loadcities.do</url-pattern>
  </servlet-mapping>
</web-app>

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<City> list = getCities();
			//将数据转成JSON字符串
			JSONArray jsonObj = JSONArray.fromObject(list);
			System.out.println(jsonObj);//控制台显示
			out.print(jsonObj.toString());//给Ajax对象返回.【3】
			out.close();
	}

	private List<City> getCities() {
		
		List<City> list = new ArrayList<City>();
		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数据库连接,
           提取数据表数据。

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

演示案例

猜你喜欢