JQuery

最新推荐文章于 2023-07-07 14:28:52 发布
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量118 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21907023/article/details/97275213
版权

一、入门

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

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

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

  3. hello jQuery
    3.1 导入js库
    在这里插入图片描述
    3.1.1 在jsp页面导入jquery

    <scripttype=“text/javascript"src=”${pageContext.request.contextPath}/js/jquery.min.js">

3.2 $(fn)做为程序入口

<script type="text/javascript">
$(function () {
	alert("hello jquery");
})
</script>

测试：
在这里插入图片描述
如何查看jquery是否导入：在开发模式里看
在这里插入图片描述
如果报错的话就是导入失败。
3.3

 `$(fn)、$(document).ready(fn)与window.onload的区别？`
① $(fn)、$(document).ready(fn) 是等价的，谁在前谁先执行；Jsp的dom树结构加载完毕立即调用。
②Window.onload最后执行，jsp的dom树加载完、css、js等静态资源加载完毕再执行。

4.jQuery三种工厂方法 （index2.jsp）
Index2.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">
	$(function () {
		//利用a标签获取实例 标签选择器
		/* $("a").click(function () {
			alert("标签选择器");
		}) */
		//利用id=a3获取实例 id选择器
		/*  $("#a3").click(function () {
		alert("id选择器");
	})  */
		//类选择器
		/* $(".c2").click(function () {
			alert("类选择器");
		}) */
		
		// 包含选择器
		/* $("p a").click(function () {
			alert("包含选择器");
		}) */
		
		//组合选择器
		/* $("a,span").click(function () {
			alert("组合选择器");
		}) */
		
		
		//第二个参数的作用（在div标签的内部寻找a标签，给找到的a标签添加事件）
		//如果第二个参数没有填写，默认是document（整个文档）
		$("a","div").click(function () {
			alert("组合选择器");
		})
	})

</script>
<title>Insert title here</title>
</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 ="c4" href="#">点我4</a>
	</div>
	<div>
	<p>
	<a id = "a5" class ="c5" href="#">点我5</a>
	</p>
	</div>
	<span>点我6</span>
</body>
</html>

4.1jQuery(exp[,context])

//利用a标签获取实例 标签选择器
		/* $("a").click(function () {
			alert("标签选择器");
		}) */
		//利用id=a3获取实例 id选择器
		/*  $("#a3").click(function () {
		alert("id选择器");
	})  */
		//类选择器
		/* $(".c2").click(function () {
			alert("类选择器");
		}) */
		
		// 包含选择器
		/* $("p a").click(function () {
			alert("包含选择器");
		}) */
		
		//组合选择器
		/* $("a,span").click(function () {
			alert("组合选择器");
		}) */
		
		
		//第二个参数的作用（在div标签的内部寻找a标签，给找到的a标签添加事件）
		//如果第二个参数没有填写，默认是document（整个文档）
		/* $("a","div").click(function () {
			alert("组合选择器");
		}) */

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

<%@ 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">
  $(function () {
	  
	$(":input[name='name1']").click(function () {
		//在id=selld1 的select的jquery实例上追加自定义的html jquery实例
		$("#selId1").append("<option value='1'>湖南</option>")
	})
		//将自定义的htmljquery实例追加到id=selld2的select的jquery实例上
	$(":input[name='name2']").click(function () {
		$("<option value='1'>长沙</option>").appendTo("#selId2");
	})
})

</script>
<title>Insert title here</title>
</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>

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

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


  $(function () {
	  
	//$就是jQuery简写  
	  var $h1 = $("#h1");
	  alert($h1.val());
	  //jquery 转 js 对象
	  	//jquery 对象
		// var h1Node = $h1.get(0);
	  	//var h1Node = $h1[0];
	  //alert(h1Node.value);
	  
	  //js对象
	  var h2Node = document.getElementById("h2");
	  //alert(h2Node.value)
	 // alert(h2Node.val()) js对象无法直接使用
	 
	 //如何将js对象转jquery对象
	var $h2Node = $(h2Node);
	  alert($h2Node.val());
	 
	 
	 
})

</script>
<title>Insert title here</title>
</head>
<body>

	
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">

</body>
</html>
  1. this指针的作用 （index4.jsp）
    5.1 事件源（获取当前按钮的按钮值）
    5.2 当前元素（点击按钮，获取所有a标签的值）
  <%@ 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">
    $(function () {
    	
    	$(":input").click(function () {
    		//this 事件源
    		alert(this.value)
    		
    		$("a").each(function (index,item) {
    			//this 指的是当前元素 item = this
    			alert("第几个："+index+","+$(item).html())
    		})
    		
    	})
    })
    </script>
    <title>Insert title here</title>
    </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>

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

<%@ 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">
$(function () {
	$("table tr:eq(0)").addClass("fen")
	$("table tr:gt(0)").addClass("yello")
	
	$("table tr:gt(0)").hover(function () {
		$(this).removeClass().addClass("red");
	},function () {
		$(this).removeClass().addClass("blue");
	}
	
	)
	
	/* //当鼠标指针位于元素上方时时，改变元素的背景色：
	$("table tr:gt(0)").mouseover(function () {
		$("table tr:gt(0)").css("background-color","red");
	})
	//当鼠标从元素上移开时，改变元素的背景色：
	$("table tr:gt(0)").mouseout(function () {
		$("table tr:gt(0)").css("background-color","yellow");
	}) */
})
</script>
<style type="text/css">
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

</style>

<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插件

1 . 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}

//json 对象的字符串体现形式
	var jsonObj1 ={
		sid:'s001',
		sname:'zhangsan'
	};
	//显示[object object]
	//alert(jsonObj1);
	
	//用控制台显示 
	console.log(jsonObj1);

2.2 列表/数组
[1,3,4,5]

//json数组的字符串体现形式
	var jsonArray = [1,2,3,4];
	console.log(jsonArray);

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

//json混合模式的字符串体现形式
	var jsons ={id:3,hobby:['a','b','c']}
	console.log(jsons)

3.$ .extend和$.fn.extend

3.1 $ .extend：对象的扩展(或继承)
$ .extend(obj1,obj2,obj3[,…])
$ .extend(obj1,obj2)
$ .extend(obj1)/$.method=function(options){…};

<script type="text/javascript">
$(function () {
	
	 //json 对象的字符串体现形式
	var jsonObj1 ={
		sid:'s001',
		sname:'zhangsan'
	};
	//显示[object object]
	//alert(jsonObj1);
	
	//用控制台显示 
	console.log(jsonObj1);
	
	//json数组的字符串体现形式
	var jsonArray = [1,2,3,4];
	console.log(jsonArray);
	
	//json混合模式的字符串体现形式
	var jsons ={id:3,hobby:['a','b','c']}
	console.log(jsons) 
	
	var jsonObj3= {
		sid:'s003',
		sname:'lisi',
		hobby:['1','2','a']
	}
	
	
	//$.extend：用啦扩充jquery类属性或者方法所用
	var jsonObj2 = {};
	//用后面的对象扩充前面的(单个)
	$.extend(jsonObj2,jsonObj1);
	console.log(jsonObj2)
	//用后面的对象扩充前面的(多个 )
	//值覆盖：之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性会继续扩充
	var jsonObj4 = {};
	$.extend(jsonObj4,jsonObj1,jsonObj3);
	console.log(jsonObj4)

//扩充方法
	$.extend({
		hello:function(){
			alert('扩充方法');
		}
	})
	
	$.hello()
	
})

</script>

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

//$.fn.extend是用来扩充jquery实例的属性或方法的
	$.fn.extend({
		sayHello:function(){
			alert('$.fn.extend');
		}
	})

4.jQuery插件开发实例
在这里插入图片描述
4.1 命名
jquery.table.js

$(function() {
	var defaults = {
		head : 'red',
		out :'yellow',
		over:'fen'
		
	}
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比StringBuffer
		bgColor:function(option){
			//利用扩充属性的方法 用前面传过来的参数覆盖之前默认的颜色
			$.extend(defaults,option);
			
			//return 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.2 jquery.table.css

.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

4.3 通用的头部 head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE >
<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>
<link href="${pageContext.request.contextPath}/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>

4.4 index9.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:'hui',
			over:'green'
		});
	})
</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（还有fastjson、goso）
    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 类里嵌类
混合模式

Student 类：

package swx.entity;

public class Student {
	private String sid;
	private String name;
	
	public String getSid() {
		return sid;
	}
	public void setSid(String sid) {
		this.sid = sid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Student(String sid, String name) {
		super();
		this.sid = sid;
		this.name = name;
	}
	public Student() {
		super();
	}
	@Override
	public String toString() {
		return "Student [sid=" + sid + ", name=" + name + "]";
	}
	
}

导入jar包：
在这里插入图片描述

后台json的三种格式的体现形式

package swx.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 swx.entity.Student;

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

打印结果：
在这里插入图片描述
论证javaBean与Map集合转换成json字符串格式是一样的

package swx.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字符串格式是一样的
 * @author 10570
 *
 */
public class Demo2 {
	public static void main(String[] args) throws Exception {
		Map<String , Object> stum1 = new HashMap<String, Object>();
		stum1.put("sid", "s001");
		stum1.put("sname", "张三");
		ObjectMapper om = new ObjectMapper();
		System.out.println(om.writeValueAsString(stum1));
		//{"sid":"s001","name":"张三"}
		//打印结果：{"sname":"张三","sid":"s001"}
		
		Map<String , Object> stum2 = new HashMap<String, Object>();
		stum2.put("sid", "s002");
		stum2.put("sname", "厉四");
		List<Map<String , Object>> list1 = new ArrayList<Map<String,Object>>();
		list1.add(stum1);
		list1.add(stum2);
		System.out.println(om.writeValueAsString(list1));
		//json数组:[{"sid":"s001","name":"张三"},{"sid":"s002","name":"李四"}]
		//[{"sname":"张三","sid":"s001"},{"sname":"厉四","sid":"s002"}]
		
	}
}

3、java->json死循环 StackOverflowError 栈内存溢出 双向绑定 彼此之间相互调用

Teacher:

package swx.entity;

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

import com.fasterxml.jackson.annotation.JsonIgnore;

public class Teacher {
 private String tid;
 private String tname;
 //不参与 @JsonIgnore 
 @JsonIgnore 
private Set<Student> stus = new HashSet<>();
public String getTid() {
	return tid;
}
public void setTid(String tid) {
	this.tid = tid;
}
public String getTname() {
	return tname;
}
public void setTname(String tname) {
	this.tname = tname;
}
public Set<Student> getStus() {
	return stus;
}
public void setStus(Set<Student> stus) {
	this.stus = stus;
}
@Override
public String toString() {
	return "Teacher [tid=" + tid + ", tname=" + tname + ", stus=" + stus + "]";
}
public Teacher(String tid, String tname, Set<Student> stus) {
	super();
	this.tid = tid;
	this.tname = tname;
	this.stus = stus;
}
public Teacher() {
	super();
}
 
}

Student:

package swx.entity;

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

public class Student {
	private String sid;
	private String name;
	private Set<Teacher> teas = new HashSet<>();
	
	
	public Student() {
		super();
	}
	public Student(String sid, String name, Set<Teacher> teas) {
		super();
		this.sid = sid;
		this.name = name;
		this.teas = teas;
	}
	public Set<Teacher> getTeas() {
		return teas;
	}
	public void setTeas(Set<Teacher> teas) {
		this.teas = teas;
	}
	public String getSid() {
		return sid;
	}
	public void setSid(String sid) {
		this.sid = sid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Student(String sid, String name) {
		super();
		this.sid = sid;
		this.name = name;
	}

	@Override
	public String toString() {
		return "Student [sid=" + sid + ", name=" + name + ", teas=" + teas + "]";
	}
	
}

解决方案：
1、忽略双向关联的一个方向即可
2、@JsonIgnore/程序控制

package swx.jquery;

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

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

import swx.entity.Student;
import swx.entity.Teacher;

/**
 *  java->json死循环
 *  解决方案：1 由双向绑定改成单向绑定 ，将彼此之间的关系交由一方维护 
 *  			 
 *  
 *  		  2 加上注解 @JsonIgnore 将彼此循环调用的属性忽略，不参与对象转成json格式
 * @author 10570
 *
 */
public class Demo3 {
public static void main(String[] args) throws Exception {
	Student stu1 = new Student("s001", "拉克丝");
	Student stu2 = new Student("s002","德玛西亚");
	Teacher tea1 = new Teacher("s001",	"晓哥", null);
	Teacher tea2 = new Teacher("s002",	"刘哥", 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));
	//StackOverflowError 栈内存溢出 双向绑定 彼此之间相互调用
	
	
	
}
}

ajax之省市联动：
RegionDao ：

package swx.dao;

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

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

public class RegionDao extends JsonBaseDao{
	public List<Map<String, Object>> list(Map<String, String[]> paramMap,PageBean pageBean) throws 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) throws Exception {
//		Map<String,String[]> paramMap = new HashMap<>();
//		paramMap.put("ID", new String[] {"9504"});
		RegionDao regionDao = new RegionDao();
		List<Map<String, Object>> list = regionDao.list(paramMap , null);
		System.out.println(list);
	}
}

RegionServlet :

package swx.web;

import java.io.IOException;
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 swx.dao.RegionDao;
import util.ResponseUtil;

public class RegionServlet extends HttpServlet{


	private static final long serialVersionUID = -4937305257225788494L;
	private RegionDao regionDao = 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>> list = regionDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(list));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		
	}
	
}

BaseDao:

package util;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

	public List<T> executeQuery(String sql, PageBean pageBean, Callback<T> callback)
			throws SQLException, InstantiationException, IllegalAccessException {
		if (pageBean != null && pageBean.isPagination()) {
			Connection con = DBAccess.getConnection();
			String countSql = getCountSql(sql);
			PreparedStatement countPst = 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 = con.prepareStatement(pageSql);
			ResultSet pageRs = pagePst.executeQuery();
			return callback.foreach(pageRs);
		} else {
			Connection con = DBAccess.getConnection();
			PreparedStatement pst = 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";
	}
}

JsonBaseDao:

package util;

import java.lang.reflect.Field;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JsonBaseDao extends BaseDao<Map<String,Object>> {
	public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
		return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
			@Override
			public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				/*
				 * 1、创建一个实体类的实例
				 * 2、给创建的实例属性赋值
				 * 3、将添加完类容的实体类添加到list集合中
				 */
//				list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
				List<Map<String,Object>> list = new ArrayList<>();
//				获取源数据
				ResultSetMetaData md = 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 util;

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

/**
 * 专门用来处理json数据的工具包
 * @author 10570
 */
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 "";
	}
}

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>Songwanxi_jquery</display-name>
 <servlet>
 <servlet-name>regionServlet</servlet-name>
 <servlet-class>swx.web.RegionServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>regionServlet</servlet-name>
 <url-pattern>/regionServlet</url-pattern>
 </servlet-mapping>
</web-app>

index10.js:

$(function() {
	var ctx = $("#ctx").val();
	$.ajax({
		url:ctx+"/regionServlet",
		success:function(data){
			for(index in data ){
				
				$("#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,//this 当前元素
			success:function(data){
				for(index in data ){
					
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
				}
			},
			dataType:"json"
		});
	})
})

index10.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}/jquery/index10.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div>
	<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>

测试图：
在这里插入图片描述
在这里插入图片描述

秃头使我变强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4621
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
Jquery遍历元素
qq_43781887的博客
07-12 4972
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jQuery
CJW的博客
07-28 9600
jQuery jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素 选取 HTML 元素 操作 CSS 操作 HTML 事件函数 JavaScript 特效 动画 HTML DOM 遍历和修改 AJAX 除此之外，JQuery还提供了大量的插件。目前兼容于所有主流浏览器。 jQuery 语法 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。jQu
JQuery的引用
zwjl1017的博客
04-01 4014
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery 遍历对象
m0_67458498的博客
03-28 4196
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3665
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5020
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5161
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5310
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3130
jQuery的两种引入方式
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-1.9.1.js
最新发布
09-07
jquery-1.9.1版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值