jquery(入门,插件,ajax)

BK_201H

于 2019-07-26 11:28:38 发布

阅读量331

点赞数

分类专栏：自定义mvc框架文章标签： jquery

本文链接：https://blog.csdn.net/qq_45105634/article/details/97374842

版权

自定义mvc框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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的区别？

4. jQuery三种工厂方法（demo2.jsp）
4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

  注1：选择器，css选择器
  标签选择器
  ID选择器
  类选择器

  包含选择器：E1 E2
  组合选择器：E1,E2,E3

  自定义选择器：:exp

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

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

注1：$就是jQuery简写

5. jQuery程序的入口
$(document).ready(fn)

$(fn);

6. this指针的作用（demo4.jsp）
6.1 事件源（获取当前按钮的按钮值）

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

6.3 插件一章再讲

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

demo1

<%@ 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">
/* $(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)是等价的会同时执行  window.onload 会最后执行
     jsp的dom树加载完毕即刻调用方法
     window.onload最后执行
     jsp的dom树加载完,css.js等静态资源加载完毕
     
*/
</script>
</head>
<body>

</body>
</html>

结果的先后顺序’
$(f u n c t i o n),$ (document).ready(function)是等价的会同时执行 window.onload 会最后执行

Damo2

<%@ 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">
//利用a标签获取jquery实例
$(function () {
	$("a").click(function name() {
		alert("翻牌子");
	});
	//利用id标签获取jquery实例
	$("#a3").click(function name() {
		alert("被反牌子了");
	});
	//类选择器
	$(".c1").click(function name() {
		alert("123");
	});
	//包含选择器
	$("p a").click(function name() {
		alert("456");
	});
	//组合选择器
	$("a,span").click(function name() {
		alert("789");
	});
	//讲解第二个参数的作用（在div内部寻找a标签,然后给找到的标签添加事件）
	//如果第二个参数没有填，默认是document
	$("a","div").click(function name() {
		alert("000");
	});
})
</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>

结果:

在这里插入图片描述
Demo3

<%@ 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="jquery-easyui-1.5.1/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>"的html jquery实例
			$("#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("#selId2");
			
			/* var $h1 = $("#h1");
			alert($h1.val());
			//jquery对象转js对象
			//var h1Node = $h1.get(0);
			var h1Node = $h1[0];
			alert(h1Node.value); */
			
			var h2Node = document.getElementById("h2");
			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>

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

Demo4

<%@ 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="jquery-easyui-1.5.1/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>

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

Demo5

<%@ 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="jquery-easyui-1.5.1/jquery.min.js"></script>
<style type="text/css">
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
	$("table tr:eq(0)").addClass("yello");
	$("table tr:gt(0)").addClass("red");
	
	$("table tr:gt(0)").hover(function(){
		$(this).removeClass().addClass("fen");
	},function(){
		$(this).removeClass().addClass("red");
	});
})
</script>
<title>Insert title here</title>
</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 插件

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

1. json的三种格式
1.1 对象
{sid:‘s01’,sname:‘zs’}
1.2 列表/数组
[1,3,4,5]

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

2. $. e x t e n d 和$ .fn.extend
2.1 $.extend：对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
$. e x t e n d (o b j 1) /$ .method=function(options){…};

2.2 $.fn.extend
$. f n . e x t e n d (o b j 1) / /$ .fn.method=function(options){…};

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

4. jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）
4.1 命名
jquery.xxx.js

4.2 扩展实例方法

4.3 如何面向集合

4.4 如何多行集于一行

4.5 命名参数的写法

在这里插入图片描述
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);
				});
			});
		}
	});
})

head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<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>

Demo6

<%@ 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:3,hobby:['a','b','c']};
		console.log(jsons);
		
		var jsonObj3 = {
				sid:'s002',
				sname:'lisi',
				hobby:['a','b','c']
		};
		
		//$.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>

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

Demo7

<%@ 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>
<style type="text/css">
.over{
	background:  #ff66ff;
}
.out{
	background: #ffff66;
}
.head{
	background: #ff3333;
}
</style>

<script type="text/javascript">
	$(function(){
		$("table").each(function(){
			//给默认值
			$("tr:eq(0)",this).addClass('head');
			$("tr:gt(0)",this).addClass('out');
			
			//添加动态效果
			$("tr:gt(0)",this).hover(function(){
				$(this).removeClass().addClass('over');
			},function(){
				$(this).removeClass().addClass('out');
			});
		});
		
	})
</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

<%@ 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">
<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>

<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$("table").bgColor({
			head:'red',
			out:'yellow',
			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>

结果:
在这里插入图片描述
Demo9

<%@ 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">
<style type="text/css">
@import url(js/bgColor/bgColor.css);
</style>
<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>

jquery ajax

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

核心代码：

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

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

2.2 数组/List/Set
[]

2.3 类里嵌类
混合模式

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

@JsonIgnore/程序控制

4. 日期及数字格式化问题(作业)
yyyy年MM月dd日

84.075->￥84.08

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

Demo1

package com.bk201;

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

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

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

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

demo2

package com.bk201;

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字符串格式是一样的
 *
 */
public class Demo2 {
	public static void main(String[] args) throws Exception{
		Map<String, Object> stu1=new HashMap<String, Object>();
		stu1.put("sid", "s001");
		stu1.put("sname", "张三");
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
		Map<String, Object> stu2=new HashMap<String, Object>();
		stu2.put("sid", "s002");
		stu2.put("sname", "李四");
		List<Map<String, Object>> list1=new ArrayList<Map<String,Object>>();
		list1.add(stu1);
		list1.add(stu2);
		System.out.println(om.writeValueAsString(list1));
		
		
	}
}

结果:

在这里插入图片描述
demo3

package com.bk201;

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

import com.bk201.entity.Student;
import com.bk201.entity.Teacher;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 *json死循环问题
 *1.由双向绑定改成单向绑定，将彼此之间的关系交于一方维护
 *2.@JsonIgnore:将彼此循环调用的属性忽略，不参与对象转成json格式
 *
 */
public class Demo3 {
	public static void main(String[] args) throws Exception{
		Student stu1=new Student("s001","张三");
		Student stu2=new Student("s002","李四");
		Teacher ter1=new Teacher("t001","王五",null);
		Teacher ter2=new Teacher("t002","赵六",null);
		Set<Teacher> teas=new HashSet<>();
		teas.add(ter1);
		teas.add(ter2);
		stu1.setTeas(teas);
		Set<Student> stus=new HashSet<>();
		stus.add(stu1);
		stus.add(stu2);
		ter1.setStus(stus);
		ObjectMapper om=new ObjectMapper();
		System.out.println(om.writeValueAsString(stu1));
		
		
	}
}

结果:
在这里插入图片描述
Demo10

<%@ 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>

ajax实现省市联动
basedao

package com.bk201.util;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;

import com.mysql.jdbc.PreparedStatement;

/**
 * 通用的查询方法 23种设计模式之策略模式 
 * 作用：在方法或类中已经完成了对应的功能，然后在调用方去根据自己的需求去处理结果。 使得代码更加灵活。
 * 
 * @author Administrator
 *
 * @param <T>
 */
public class BaseDao<T> {
	// $.ajax
	protected interface Callback<T> {
		public List<T> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException, Exception;
	}

	public List<T> executeQuery(String sql, PageBean pageBean, Callback<T> callback)
			throws Exception{
		if (pageBean != null && pageBean.isPagination()) {
			Connection con = DBAccess.getConnection();
			String countSql = getCountSql(sql);
			PreparedStatement countPst = (PreparedStatement) con.prepareStatement(countSql);
			ResultSet countRs = countPst.executeQuery();
			if (countRs.next()) {
				pageBean.setTotal(countRs.getObject(1).toString());
			}
			DBAccess.close(null, countPst, countRs);

			String pageSql = getPageSql(sql, pageBean);
			PreparedStatement pagePst = (PreparedStatement) con.prepareStatement(pageSql);
			ResultSet pageRs = pagePst.executeQuery();
			return callback.foreach(pageRs);
		} else {
			Connection con = DBAccess.getConnection();
			PreparedStatement pst = (PreparedStatement) con.prepareStatement(sql);
			ResultSet rs = pst.executeQuery();
			return callback.foreach(rs);
		}

	}

	/**
	 * 将原生态的sql语句转换成查对应的当页记录数sql语句
	 * 
	 * @param sql
	 * @param pageBean
	 * @return
	 */
	private String getPageSql(String sql, PageBean pageBean) {
		return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
	}

	/**
	 * 将原生态的sql语句转换成查总记录输的sql语句
	 * 
	 * @param sql
	 * @return
	 */
	private String getCountSql(String sql) {
		return "select count(1) from (" + sql + " ) t";
	}
}

DBAccess

package com.bk201.util;

import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class DBAccess {
	private static String driver;
	private static String url;
	private static String user;
	private static String password;

	static {// 静态块执行一次，加载 驱动一次
		try {
			InputStream is = DBAccess.class.getResourceAsStream("config.properties");

			Properties properties = new Properties();
			properties.load(is);

			driver = properties.getProperty("driver");
			url = properties.getProperty("url");
			user = properties.getProperty("user");
			password = properties.getProperty("pwd");

			Class.forName(driver);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}

	/**
	 * 获得数据连接对象
	 * 
	 * @return
	 */
	public static Connection getConnection() {
		try {
			Connection conn = DriverManager.getConnection(url, user, password);
			return conn;
		} catch (SQLException e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}

	public static void close(ResultSet rs) {
		if (null != rs) {
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Statement stmt) {
		if (null != stmt) {
			try {
				stmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection conn) {
		if (null != conn) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection conn, Statement stmt, ResultSet rs) {
		close(rs);
		close(stmt);
		close(conn);
	}

	public static boolean isOracle() {
		return "oracle.jdbc.driver.OracleDriver".equals(driver);
	}

	public static boolean isSQLServer() {
		return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
	}

	public static boolean isMysql() {
		return "com.mysql.jdbc.Driver".equals(driver);
	}

	public static void main(String[] args) {
		Connection conn = DBAccess.getConnection();
		DBAccess.close(conn);
		System.out.println("isOracle：" + isOracle());
		System.out.println("isSQLServer：" + isSQLServer());
		System.out.println("isMysql：" + isMysql());
		System.out.println("数据库连接(关闭)成功");
	}
}

EntityBaseDao

package com.bk201.util;
import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.mysql.jdbc.PreparedStatement;

public class EntityBaseDao<T> extends BaseDao<T> {
	public List<T> executeQuery(String sql, PageBean pageBean, Class clz) throws Exception, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<T>() {
			@Override
			public List<T> foreach(ResultSet rs) throws Exception, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<T> list = new ArrayList<>();
				while(rs.next()) {
					T t = (T) clz.newInstance();
					Field[] fields = clz.getDeclaredFields();
					for (Field field : fields) {
						field.setAccessible(true);
						field.set(t, rs.getObject(field.getName()));
					}
					list.add(t);
				}
				return list;
			}
		});
	}
	
	/**
	 * 通用的增删改方法
	 * @param sql	增删改的sql语句
	 * @param attrs	？所代表的实体类的属性
	 * @param t		实体类的实例
	 * @return
	 * @throws SQLException
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 */
	public int executeUpdate(String sql, String[] attrs, T t) throws Exception, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
		Connection con = DBAccess.getConnection();
		PreparedStatement pst = (PreparedStatement) con.prepareStatement(sql);
		for (int i = 0; i < attrs.length; i++) {
			Field field = t.getClass().getDeclaredField(attrs[i]);
			field.setAccessible(true);
			pst.setObject(i+1, field.get(t));
		}
		return pst.executeUpdate();
	}
}

JsonBaseDao

package com.bk201.util;

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

import com.mysql.jdbc.ResultSetMetaData;

public class JsonBaseDao extends BaseDao<Map<String, Object>>{
	public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws Exception{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws Exception {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<Map<String,Object>> list = new ArrayList<>();
//				获取源数据
				java.sql.ResultSetMetaData md = (java.sql.ResultSetMetaData) rs.getMetaData();
				int count = md.getColumnCount();
				Map<String,Object> map = null;
				while(rs.next()) {
					map = new HashMap<>();
					for (int i = 1; i <= count; i++) {
						map.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}
				return list;
			}
		});
	}
}

JsonUtils

package com.bk201.util;

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

/**
 * 专门用来处理json数据的工具包
 * @author Administrator
 *
 */
public class JsonUtils {
	/**
	 * 从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) {
				String val = Arrays.toString(vals);
				return val.substring(1, val.length()-1);
			}
			return "";
		}
		return "";
	}
}

PageBean


package com.bk201.util;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

public class PageBean {
	private int page = 1;// 页码

	private int rows = 10;// 页大小

	private int total = 0;// 总记录数

	private boolean pagination = true;// 是否分页
	// 获取前台向后台提交的所有参数
	private Map<String, String[]> parameterMap;
	// 获取上一次访问后台的url
	private String url;

	/**
	 * 初始化pagebean
	 * 
	 * @param req
	 */
	public void setRequest(HttpServletRequest req) {
		this.setPage(req.getParameter("page"));
		this.setRows(req.getParameter("rows"));
		// 只有jsp页面上填写pagination=false才是不分页
		this.setPagination(!"fasle".equals(req.getParameter("pagination")));
		this.setParameterMap(req.getParameterMap());
		this.setUrl(req.getRequestURL().toString());
	}

	public int getMaxPage() {
		return this.total % this.rows == 0 ? this.total / this.rows : this.total / this.rows + 1;
	}

	public int nextPage() {
		return this.page < this.getMaxPage() ? this.page + 1 : this.getMaxPage();
	}

	public int previousPage() {
		return this.page > 1 ? this.page - 1 : 1;
	}

	public PageBean() {
		super();
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public void setPage(String page) {
		this.page = StringUtils.isBlank(page) ? this.page : Integer.valueOf(page);
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public void setRows(String rows) {
		this.rows = StringUtils.isBlank(rows) ? this.rows : Integer.valueOf(rows);
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}

	public boolean isPagination() {
		return pagination;
	}

	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}

	public Map<String, String[]> getParameterMap() {
		return parameterMap;
	}

	public void setParameterMap(Map<String, String[]> parameterMap) {
		this.parameterMap = parameterMap;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	/**
	 * 获得起始记录的下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}

	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination
				+ ", parameterMap=" + parameterMap + ", url=" + url + "]";
	}
}

ResponseUtil

package com.bk201.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

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

StringUtils


package com.bk201.util;

public class StringUtils {
	// 私有的构造方法，保护此类不能在外部实例化
		private StringUtils() {
		}

		/**
		 * 如果字符串等于null或去空格后等于""，则返回true，否则返回false
		 * 
		 * @param s
		 * @return
		 */
		public static boolean isBlank(String s) {
			boolean b = false;
			if (null == s || s.trim().equals("")) {
				b = true;
			}
			return b;
		}
		
		/**
		 * 如果字符串不等于null或去空格后不等于""，则返回true，否则返回false
		 * 
		 * @param s
		 * @return
		 */
		public static boolean isNotBlank(String s) {
			return !isBlank(s);
		}
}

config.properties

#oracle9i
#driver=oracle.jdbc.driver.OracleDriver
#url=jdbc:oracle:thin:@localhost:1521:ora9
#user=test
#pwd=test


#sql2005
#driver=com.microsoft.sqlserver.jdbc.SQLServerDriver
#url=jdbc:sqlserver://localhost:1423;DatabaseName=test
#user=sa
#pwd=sa


#sql2000
#driver=com.microsoft.jdbc.sqlserver.SQLServerDriver
#url=jdbc:microsoft:sqlserver://localhost:1433;databaseName=unit6DB
#user=sa
#pwd=888888


#mysql5
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/class_?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT
user=root
pwd=123

RegionDao

package com.bk201.dao;

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

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


public class RegionDao extends JsonBaseDao{
	public List<Map<String, Object>> list(Map<String,String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, Exception{
		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 (Exception e) {
			e.printStackTrace();
		}
	}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>jquery</display-name>
 <servlet>
  	<servlet-name>regionServlet</servlet-name>
  	<servlet-class>com.bk201.web.RegionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>regionServlet</servlet-name>
  	<url-pattern>/regionServlet</url-pattern>
  </servlet-mapping>
</web-app>