《jQuery的ajax及+json实现三级联动》

1. jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

核心代码：
ObjectMapper om = new ObjectMapper();
mapper.writeValueAsString(obj);

int count = metaData.getColumnCount();
map.put(metaData.getColumnName(i), rs.getObject(i));

2. jackson将java–>json

2.1 JavaBean/Map

2.2 数组[]

2.3 混合模式

package com.zy.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zy.entity.Student;

/**
 * 后台json的三种格式的体现形式
 * @author 1
 *
 */
public class DemoA {
	
	public static void main(String[] args) throws JsonProcessingException {
		//json对象形式
		Student stua=new Student("001", "A1");
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stua));
		
		//json数组形式
		Student stub=new Student("002", "B2");
		List<Student> list1=new ArrayList<>();
		list1.add(stua);
		list1.add(stub);
		System.out.println(om.writeValueAsString(list1));
		
		//json混合形式
		Map<String, Object> map=new HashMap<>();
		map.put("s003", "C3");
		map.put("s004", list1);
		System.out.println(om.writeValueAsString(map));
		
	}

}

package com.zy.jquery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * javaBean与Map集合转换成json字符串的格式是一样的（除去map集合无序排列）
 * @author 1
 *
 */
public class DemoB {
	
	public static void main(String[] args) throws JsonProcessingException {
		
		ObjectMapper om=new ObjectMapper();
		
		//对象
		Map<String, Object> stua=new HashMap<>();
		stua.put("001", "A1");
		stua.put("002", "B2");
		System.out.println(om.writeValueAsString(stua));
		
		//数组
		Map<String, Object> stub=new HashMap<>();
		stub.put("00a", "Aa");
		stub.put("00b", "Bb");
		
		List<Map<String, Object>> listm=new ArrayList<>();
		listm.add(stua);
		listm.add(stub);
		System.out.println(om.writeValueAsString(listm));
		
		//混合
		Map<String, Object> maps=new HashMap<>();
		maps.put("00s", listm);
		maps.put("00x", "Xx");
		System.out.println(om.writeValueAsString(maps));
		
//		javaBean
//              对象
//		{"sid":"001","sname":"A1","age":null,"sett":[]} 
//              数组
//		[{"sid":"001","sname":"A1","age":null,"sett":[]},{"sid":"002","sname":"B2","age":null,"sett":[]}]
//              混合
//		{"s004":[{"sid":"001","sname":"A1","age":null,"sett":[]},{"sid":"002","sname":"B2","age":null,"sett":[]}],"s003":"C3"}
		
//		Map集合
//              对象
//		{"001":"A1","002":"B2"}
//              数组
//		[{"001":"A1","002":"B2"},{"00a":"Aa","00b":"Bb"}]
//              混合
//		{"00s":[{"001":"A1","002":"B2"},{"00a":"Aa","00b":"Bb"}],"00x":"Xx"}
		
	}

}

3. java->json死循环
   忽略双向关联的一个方向即可

   @JsonIgnore/程序控制

//实体类
@JsonIgnore
	private Set<Student> sets=new HashSet<>();

package com.zy.jquery;

import java.util.HashSet;
import java.util.Set;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zy.entity.Student;
import com.zy.entity.Teacher;
/**
 * json死循环问题（java.lang.StackOverflowError）
 * 1，由双向绑定改成单向绑定
 * 2，@JsonIgnore,将彼此循环调用的属性忽略，不参与对象转成json格式的字符串(JavaBean)
 * @author 1
 *
 */
public class DemoC {
	
	public static void main(String[] args) throws JsonProcessingException {
		
		Student stua=new Student("s01", "Aa");
		Student stub=new Student("s02", "Bb");
		
		Teacher tea1=new Teacher("t01", "Ta",null);
		Teacher tea2=new Teacher("t02", "Tb",null);
		Set<Student> sets=new HashSet<>();
		sets.add(stua);
		sets.add(stub);
		tea1.setSets(sets);
		Set<Teacher> sett=new HashSet<>();
		sett.add(tea1);
		sett.add(tea2);
		stua.setSett(sett);
		
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stua));
		
	}

}

5. jQuery的ajax请求
$.ajax
url
URL后添加时间戳防止浏览器缓：xxx?ts=new Date().getTime()
success
dataType

5.1 :用jQuery的ajax实现的三级联动（部分代码，内有代码注释，用map集合代替了实体类）
5.1.1 Dao

package com.zy.util;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonBaseDao extends BaesDao<Map<String, Object>> {
	
	public final List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
		
		return super.executeQuery(sql, pageBean, new Callback<Map<String, Object>>() {
			/**
			 * 1.创建一个实体类的实例
			 * 2.给创建的实例属性赋值
			 * 3.将添加完内容的实体类添加list集合
			 * @throws SQLException 
			 */
			@Override
			public List<Map<String, Object>> foreach(ResultSet rs) throws SQLException {
				List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
				//获取源数据
				ResultSetMetaData metaData = rs.getMetaData();
				int count=metaData.getColumnCount(); //源数据的长度
				Map<String, Object> map=null;  //创建一个实体类的实例（一处创建）
				while(rs.next()) {
					map=new HashMap<>();  //一处创建多处引用
					for(int i=1;i<=count;i++) {
						Object obj = rs.getObject(i);
						if(obj instanceof Date) {
//							map.put(metaData.getColumnName(i), DateUtil.formatDate((Date)obj, "yyyy-MM-dd"));
						}else {
							map.put(metaData.getColumnName(i), rs.getObject(i));  //给创建的实例属性赋值
							//metaData.getColumnName(i) 键，  rs.getObject(i) 值
						}
					}
					list.add(map);  //将添加完内容的实体类添加list集合
				}
				return list;  //返回list
			}
		});
	}
}

package com.zy.dao;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zy.util.JsonBaseDao;
import com.zy.util.JsonUtil;
import com.zy.util.PageBean;
import com.zy.util.StringUtils;

public class RegionDao extends JsonBaseDao{
	
	public List<Map<String, Object>> regionList(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id = JsonUtil.getparamVal(paramMap, "ID");
		String sql=" select * from ch_region where true ";
//		判断id是否为空，再拼接SQL语句
		if(StringUtils.isBlank(id)) {
			sql+=" and parent_id=7459 ";
		}else {
			sql+=" and parent_id="+id;
		}
		return super.executeQuery(sql, pageBean);
	}
	
//	public static void main(String[] args) {  //测试
//		Map<String, String[]> paramMap=new HashMap<String, String[]>();
//		paramMap.put("ID", new String[] {"9504"});
//		RegionDao rd=new RegionDao();
//		try {
//			List<Map<String, Object>> rList = rd.regionList(paramMap, null);
//			System.out.println(rList);
//		} catch (InstantiationException e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		} catch (IllegalAccessException e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		} catch (SQLException e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}
//	}

}

5.1.2 Util

package com.zy.util;

import java.util.Arrays;
import java.util.Map;

/**
 * 专门用来处理json数据的工具包
 * @author 1
 *
 */
public class JsonUtil {
	/**
	 * 从paramMap拿到需要的查询维度，用于SQL语句拼接
	 * @param paramMap 从jsp页面传递到后台的参数集合（req.getParamterMap）
	 * @param Key 某一个键
	 * @return
	 */
	public static String getparamVal(Map<String, String[]> paramMap,String Key) {
		if(paramMap!=null && paramMap.size()>0) {
//			拿到这个键的值
			String[] vals = paramMap.get(Key);
//			判断是否为空
			if(vals!=null && vals.length>0) {
//				将数组vals转换成字符串的方法
				String val = Arrays.toString(vals);
//				substring方法去[ ]
				return val.substring(1, val.length()-1);
			}
			return "";
		}
		return "";
	}

}

package com.zy.util;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class ResponseUtil {
	
	public static void write(HttpServletResponse response,Object o) throws IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}

}

5.1.3 Web

package com.zy.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zy.dao.RegionDao;
import com.zy.util.ResponseUtil;

@WebServlet(name="RegionServlet",urlPatterns="/doRegion")
public class RegionServlet extends HttpServlet {

	private static final long serialVersionUID = 3008544552320754306L;
	private RegionDao rd=new RegionDao();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		try {
			List<Map<String, Object>> rList = rd.regionList(req.getParameterMap(), null);
			ObjectMapper om=new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(rList));
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

}

5.1.4 Jsp页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp" %>  <!-- 引用jQuery插件，以及自定义jQuery插件 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
	<h1>$.ajax实现省市联动</h1>
	<div>
	    <input id="curl" type="hidden" value="${pageContext.request.contextPath}" />
		China 地址:&nbsp;&nbsp;
		<select id="province">
			<option selected="selected">---请选择省份---</option>
		</select>&nbsp;&nbsp;
		<select id="city">
			<option selected="selected">---请选择城市---</option>
		</select>&nbsp;&nbsp;
		<select id="county">
			<option selected="selected">---请选择县区---</option>
		</select>
	</div>
</div>
</body>
</html>

5.1.5 自定义jQuery插件

$(function() {
//	根据id获取项目名
	var curl=$("#curl").val();
	
//	jQuery的ajax方法
	$.ajax({  
		url:curl+"/doRegion",  //请求的URL
	    success:function(data){  //回调函数：当请求之后调用。传入返回后的数据，以及包含成功代码的字符串
	    	for(index in data){  //遍历所有返回的数据（data：返回过来字符串的所有属性值）
//	    		console.log(data[index]); 控制台查看返回的所有数据
//	    		根据select的id追加所有省的option
	    		$("#province").append("<option value='"+data[index].ID+"' >-"+data[index].REGION_NAME+"-</option>");
	    	}
	    },
		dataType:"json"  //指定json的数据处理方式
	});
	
	$("#province").change(function() {  //触发每个匹配元素的change事件,change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发
//		this.value  当前属性值（省id的值）
		$("option:gt(0)","#city").remove();  //移除id为city的select（清除追加，从第一行开始）
		$.ajax({  
			url:curl+"/doRegion?ID="+this.value,  //请求的URL和参数省id的值
		    success:function(data){
		    	for(index in data){
		    		$("#city").append("<option selected='selected' value='"+data[index].ID+"' >-"+data[index].REGION_NAME+"-</option>");
		    	}
		    },
			dataType:"json"
		});
		
		$("#city").change(function() {  
			$("option:gt(0)","#county").remove();  //移除id为county的select（清除追加，从第一行开始）
			$.ajax({
//				this.value  当前属性值（市id的值）
				url:curl+"/doRegion?ID="+this.value,
			    success:function(data){
			    	for(index in data){
			    		$("#county").append("<option selected='selected' value='"+data[index].ID+"' >-"+data[index].REGION_NAME+"-</option>");
			    	}
			    },
				dataType:"json"
			});
			
		})	
		
	})
	
})