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

本是古典何须时尚 2022-05-11 09:40 210阅读 0赞

**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;
    
    /**
     * 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"}
    		
    	}
    
    }

1.  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" %>  
    <!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 地址:  
    		<select id="province">
    			<option selected="selected">---请选择省份---</option>
    		</select>  
    		<select id="city">
    			<option selected="selected">---请选择城市---</option>
    		</select>  
    		<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"
    			});
    			
    		})	
    		
    	})
    	
    })