jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

路过、错过、不想再放过

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量103

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qiu_hyun/article/details/97375847

jQuery（入门、插件、ajax）

一、 jQuery入门

1. 什么是jQuery
它是一个轻量级的javascript类库

注1：就一个类“jQuery”，简写“$”

2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

3. hello jQuery
3.1 导入js库（）
3.2 $(fn)做为程序入口

$(f n) 、$ (document).ready(fn)与window.onload的区别？

代码演示Demo1.jsp:（区别）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
/*  $(fn)、$(document).ready(fn)与window.onload的区别？
  项目维护时候需要到
*/
    $(function() {
		alert("hello jquery1");
	})
	
	$(document).ready(function(){
		alert("hello jquery2");
	})
	
	window.onload = function() {
    	alert("hello jquery3");
	}
	
	/* 结论：$(fn),$(document).ready(fn)是等价的，哪个代码在前面哪个先执行
	       jsp的dom树结构加载完毕即刻调用方法
	       window.onload最后执行
	       jsp的dom树加载完，css，js等静态资源加载完毕执行
	*/
</script>
</head>
<body>

</body>
</html>

4. jQuery三种工厂方法（demo2.jsp）

4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

注1：选择器，css选择器
标签选择器
ID选择器
类选择器
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp

代码演示Demo2.jsp:（选择器）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		//利用a标签获取jQuery实例
		/* $("a").click(function() {
			alert("就决定是你了")
		}) */
		//利用ID=a3获取jQuery实例
		/* $("#a3").click(function() {
			alert("就决定是你了")
		}) */
		//类选择器
		/* $(".c1").click(function () {
			alert("就决定是你了")
		}) */
		//包含选择器
		/* $("p a").click(function() {
			alert("就决定是你了")
		}) */
		// 组合选择器
		/* $("a,span").click(function() {
			alert("就决定是你了")
		}) */
		
		//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
		//如果第二个参数没有填，那么默认是document
		$("a","div").click(function() {
			alert("就决定是你了")
		})
	})
		

</script>
</head>
<body>
	<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
	
	<span>点我</span>
</body>
</html>

4.2 jQuery(html) （demo3.jsp）
html：基于html的一个字符串

4.3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

注1：$就是jQuery简写

代码演示Demo3.jsp：（html/element）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$(":input[name='name1']").click(function() {
			//在ID=selId1的select的jQuery实例上追加到"<option value='1'>河南省</option>"实例
			$("#selId1").append("<option value='1'>河南省</option>")
		});
		
		$(":input[name='name2']").click(function() {
			//将"<option value='1'>重庆</option>"的html jQuery实例追加到ID=selId2的select标签jQuery实例中
			$("<option value='1'>重庆</option>").appendTo("#selId1")
			
			/* var $h1 = $("#h1");
			alert($h1.val());
			//jQuery对象转JS对象
			//var h1Node = $h1.get(0);
			var h1Node = $h1[0];
			alert(h1Node.value); */
			
			
			var h2Node = document.getElementById("h1");
			alert(h2Node.value);
			//JS对象转jQuery对象
			var $h2Node = $(h2Node);
			alert($h2Node.val());
			
		});
	})
</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="selId2">
		<option value="-1">---请选择---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>

图片结果：（点击add1添加省，add2添加市）
在这里插入图片描述

5. jQuery程序的入口

  $(document).ready(fn)

  (fn);

6. this指针的作用（demo4.jsp）

6.1 事件源（获取当前按钮的按钮值）

6.2 当前元素（点击按钮，获取所有a标签的值）

6.3 插件一章再讲

代码演示Demo4.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {
		$(":input").click(function() {
			//指的是事件源
			alert(this.value)
			$("a").each(function(index,item) {
				//指的是当前元素
				alert(index+","+$(this).html()+","+$(item).html())
			})
		})
		
	})

</script>
</head>
<body>
	<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
	
	<input type="button" value="ok">

</body>
</html>

7、使用jquery动态给table添加样式

Demo5.jsp：（添加颜色）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<style type="text/css">
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {
		$("table tr:eq(0)").addClass("red")
		//$("table tr:gt(0)").addClass("green")
		//鼠标的移动事件
		$("table tr:gt(0)").hover(function() {
			$(this).addClass("yello")
		},
		function() {
			$(this).removeClass("yello")
		})
	})

</script>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

图片结果（鼠标悬停的表格加上特定的类）：

二、 jQuery插件

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

2.1 对象
{sid:‘s01’,sname:‘zs’}
2.2 列表/数组
[1,3,4,5]

2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}

2. 4 $. e x t e n d 和$ .fn.extend
2.4.1 $.extend：对象的扩展(或继承)

      $.extend(obj1,obj2,obj3[,...])
      $.extend(obj1,obj2)
      $.extend(obj1)/$.method=function(options){...};

2.4.2 $.fn.extend

   $.fn.extend(obj1)//$.fn.method=function(options){...};

Demo6.jsp：（json格式）

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {
		//json对象的字符串体现形式
		var jsonObj1 = {
				sid:"s001",
				sname:"zhangsan"
		}
		console.log(jsonObj1)
		//json数组的字符串体现形式
		var jsonArray1=[1,3,4,5];
		console.log(jsonArray1)
		//json混合模式的字符串体现形式
		var jsons = {id:2,hobby:['a','s','d']};
		console.log(jsons)
		
		var jsonObj3 = {
				sid:"s002",
				sname:"lisi",
				hobby:['a','s','d']
		}
		
		//$.extend是用来扩充jQuery类属性或者方法所用
		var jsonObj2 = {};
		//用后面的对象扩充一个对象
		//$.extend(jsonObj2, jsonObj1)
		//讲解扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。
		$.extend(jsonObj2,jsonObj1,jsonObj3)
		console.log(jsonObj2);
		
		$.extend({
			hello:function(){
				alert("我来了");
			}
		})
		
		$.hello();
		
		//$.fn.extend是用来扩充jQuery实例的属性或者方法所用
		$.fn.extend({
			sayHello:function(){
				alert("来了，老弟！");
			}
		})
		
		$("#yellow").sayHello();
		alert("yellow")
		
		
	})
</script>
</head>
<body>
	<span id="yellow">yellow</span>
</body>
</html>

图片结果：（Console演示结果）

3. jQuery插件的添加

其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

代码演示：

jQuery.table.css:

@charset "UTF-8";
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

jQuery.table.js:

$(function() {
	var defaults = {
			head : 'fen',
			out : 'yellow',
			over : 'red' 
	}
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比stringbuffer
		bgColor:function(option){
			$.extend(defaults, option);
			//这里的this指的是插件本身，可以看成一个jQuery实例
			return this.each(function() {
				//this指的是当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);

				//添加动态效果
				$("tr:gt(0)",this).hover(function() {
					$(this).removeClass().addClass(defaults.over);
				}, function() {
					$(this).removeClass().addClass(defaults.out);
				});
			})
		}
	})
	
})

封装包：

在这里插入图片描述

4. jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）

4.1 命名

  jquery.xxx.js

4.2 扩展实例方法

4.3 如何面向集合

4.4 如何多行集于一行

4.5 命名参数的写法

  $.extend(defaults,options);

Head.jsp:(封装css,js)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

Demo7.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>

<script type="text/javascript">
	$(function() {
		$("table").bgColor({
		})
	})
</script>
</head>
<body>
	<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>

	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

图片结果：（红色为鼠标悬停事件）

Demo8.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>

<script type="text/javascript">
	$(function() {
		$("table").bgColor({
			head : 'blue',
			out : 'green',
			over : 'hui'
		})
	})
</script>
</head>
<body>
	<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
	
	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

图片结果：（灰色为鼠标悬停事件）

Demo9.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>
<script type="text/javascript">
	$(function() {
		$("table").bgColor({
			head : 'yellow',
			out : 'red',
			over : 'blue'
		})
	})
</script>
</head>
<body>
	<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>

	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

图片结果：（蓝色为鼠标悬停事件）

三、 ajax

1. jackson

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

三种处理方式：Fastjson（阿里巴巴）/Jackson/goso（安卓）

核心代码：

   ObjectMapper mapper = new ObjectMapper();
   mapper.writeValueAsString(obj);
   
   int count = md.getColumnCount();
   map.put(md.getColumnName(i), rs.getObject(i));

代码演示：

Demo1.java

package com.qiuwenfan;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.qiuwenfan.entity.Student;

/**
 * 后台json的三种体现形式
 * 
 * @author qiuwenfan
 *
 */
public class Demo1 {
	public static void main(String[] args) throws Exception {
		//json对象
		Student stu1 = new Student("s01","张三");
		ObjectMapper om = new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
		//json数组
		Student stu2 = new Student("s02","李四");
		List<Student> list1 = new ArrayList<>();
		list1.add(stu1);
		list1.add(stu2);
		System.out.println(om.writeValueAsString(list1));
		
		//json混合格式
		Map<String, Object> map = new HashMap<>();
		map.put("total", 2);
		map.put("stu2", list1);
		System.out.println(om.writeValueAsString(map));
	}
}

图片结果：

在这里插入图片描述

2. jackson将java–>json

2.1 JavaBean/Map
{}

2.2 数组/List/Set
[]

2.3 类里嵌类
混合模式

代码演示：

Demo2.java

package com.qiuwenfan;

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

import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * javaBean与Map集合转换成json字符串格式是一样的
 * @author qiuwenfan
 *
 */
public class Demo2 {
	public static void main(String[] args) throws Exception {
		Map<String, Object> stu1 = new HashMap<>();
		stu1.put("sid", "s01");
		stu1.put("sname", "张三");
		ObjectMapper om = new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
		Map<String, Object> stu2 = new HashMap<>();
		stu2.put("sid", "s02");
		stu2.put("sname", "李四");
		List<Map<String, Object>> list1 = new ArrayList<>();
		list1.add(stu1);
		list1.add(stu2);
		System.out.println(om.writeValueAsString(list1));
//		demo1结果：{"sid":"s01","name":"张三"}
//		    [{"sid":"s01","name":"张三"},{"sid":"s02","name":"李四"}]
//		demo2结果：{"sname":"张三","sid":"s01"}   （无序的）
//		    [{"sname":"张三","sid":"s01"},{"sname":"李四","sid":"s02"}]
		
	}
}

图片结果：
在这里插入图片描述

3. java->json死循环

忽略双向关联的一个方向即可

@JsonIgnore/程序控制

Demo3.java

package com.qiuwenfan;

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

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

/**
 * 描述json死循环
 * 1.由双向绑定改成单向，也就是说将彼此之间的关系交由一方维护
 * 2.@JsonIgnore；将彼此循环调用的属性忽略，不参与对象转成json格式
 * @author wangcong
 *
 */
public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
	Student stu1=new Student("s01","张三");
	Student stu2=new Student("s02","李四");
	
	Teacher tea1=new Teacher("t01","王五",null);
	Teacher tea2=new Teacher("t02","赵六",null);
	//绑定老师信息
	Set<Teacher> teas=new HashSet<>();
	teas.add(tea1);
	teas.add(tea2);
	stu1.setTeas(teas);
	//绑定学生信息
	Set<Student> stus=new HashSet<>();
	stus.add(stu1);
	stus.add(stu2);
	//tea1.setStus(stus);//导致双向绑定——报错
	
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
}
}

图片结果：

在这里插入图片描述

4. jQuery的ajax请求

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

RegionServlet

package com.qiuwenfan.web;

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

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

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

public class RegionServlet extends HttpServlet {

	private static final long serialVersionUID = -3886409500453513785L;
	private RegionDao regionDao = new RegionDao();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			try {
				ResponseUtil.write(resp, om.writeValueAsString(list));
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
		}
	}
}

RegionDao:

package com.qiuwenfan.dao;

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

import com.qiuwenfan.util.JsonBaseDao;
import com.qiuwenfan.util.JsonUtils;
import com.qiuwenfan.util.PageBean;
import com.qiuwenfan.util.StringUtils;


public class RegionDao extends JsonBaseDao {
	
	public List<Map<String, Object>> list(Map<String,String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id = JsonUtils.getParamVal(paramMap, "ID");
		String sql = "select * from ch_region where true";
		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<>();
		paramMap.put("ID", new String[] {"9504"});
		RegionDao regionDao = new RegionDao();
		try {
			List<Map<String, Object>> list = regionDao.list(paramMap, null);
			System.out.println(list);
		} 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();
		}
	}

}

Demo10.js:

$(function(){
	var ctx = $("#ctx").val();
	$.ajax({
		url:ctx+"/regionServlet", 
		success:function(data){
			for(index in data){
				console.log(data[index]);
				$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
			}
		},
		dataType:"json"
	});
	
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					//console.log(data[index]);
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
				}
			},
			dataType:"json"
		});
	});
})

Demo10.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/demo10.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<h1>$.ajax实现省市联动</h1>
	<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>