jQuery（Ajax+json前后台数据交互）

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

   核心代码：
   //ObjectMapper是一个高效转化json格式数据的
   //ObjectMapper：分为解析json格式数据和构建json格式数据。
   ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);

//获取源数据的行数
 int count = md.getColumnCount();
 map.put(md.getColumnName(i), rs.getObject(i));

jackson将java–>json
2.1 JavaBean/Map
{}

//json对象
Student stu1=new Student("s001","张三");
ObjectMapper mapper = new ObjectMapper();
System.out.println(mapper.writeValueAsString(stu1));
结果：{sid："s001",sname:"张三"}

2.2 数组/List/Set
[]

Student stu2=new Student("s002","李四");
List<Student> list=new ArrayList<>();
list.add(stu1);
list.add(stu2);
System.out.println(mapper.writeValueAsString(list));
结果：[{sid："s001",sname:"张三"}，{sid:"s002",sname:"李四"}]

2.3 类里嵌类
混合模式

Map<String, Object> map=new HashMap<>();
map.put("total",2);
map.put("stus",list);
结果：{"total":2,"stus":[{sid："s001",sname:"张三"}，{sid:"s002",sname:"李四"}] }

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

@JsonIgnore/程序控制
jQuery的ajax请求
$.ajax
url
URL后添加时间戳防止浏览器缓：xxx?ts=new Date().getTime()
success
dataType
error
jQuery的ajax(省市县联动)

//自定义jQuery ajax插件
   //获得所有的省份
$(function(){
	var ctx=$("#ctx").val();//根据id获得项目名
	$.ajax({
		url:ctx+"/regionServlet",//请求路径
	    success:function(data){
		for(index in data){                                    //data[index].ID获得省级id，data[index].REGION_NAME(具体的省份)  
			$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
		}
	},
	dataType:"json"
	});
	//获得所有的市级
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();   //清空市级下拉框
		$("option:gt(0)","#county").remove();   //清空县级下拉框
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,  //ID指的是根据具体的省份获得该所属的市级
		    success:function(data){
		    	console.log(data);
			for(index in data){                                 //data[index].ID获得市级id，data[index].REGION_NAME(具体的市级)  
				$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
			}
		},
		dataType:"json"
		});
		//获得所有的县级
		$("#city").change(function(){
			$("option:gt(0)","#county").remove();   //清空县级下拉框
			$.ajax({
				url:ctx+"/regionServlet?ID="+this.value,   //ID指的是根据具体的省份获得该所属的市级
			    success:function(data){
				for(index in data){
				                               //data[index].ID获得县级id，data[index].REGION_NAME(具体的县级)  
					$("#county").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
				}
			},
			dataType:"json"
			});
		});
	});
	
})

三级联动的页面代码

<%@ 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>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
	<div>
		收货地址&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>

jQuery（Ajax+json前后台数据交互）

猜你喜欢