jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作。官网地址：https://jquery.com/
官网首页jQuery介绍：
jQuery是一个快速、小巧、功能丰富的JavaScript库。 它通过一个易于使用的、可跨多种浏览器工作的API，使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单。 jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
开篇基础
为什么使用jQuery
非常重要的理由就是：它能够兼容市面上主流的浏览器，IE和FireFox、Google浏览器处理AJAX，创建异步对象是不同的。而jQuery能够使用一种方式在不同的浏览器创建AJAX异步对象。
其他优点：
- 写少代码，做多事情【write less, do more】
- 免费，开源且轻量级的js库，容量很小
- 兼容市面上主流浏览器，例如：IE、Firefox、Chrome
- 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
- 文档手册很全，很详细
- 成熟的插件可供选择，多种js组件，例如日历组件
- 出错后，有一定的提示信息
- 不用再在html里面通过
DOM对象
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理 可扩展标志语言（XML(Extensible Markup Language)） 的标准编程接口。
通过DOM对HTML页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即DOM对象。DOM对象可以使用JavaScript中的方法。
JavaScript对象和jQuery对象
用JavaScript语法创建的对象叫做JavaScript对象，JavaScript对象只能调用JavaScript对象的API。
用JQuery语法创建的对象叫做JQuery对象，jQuery对象只能调用jQuery对象的API。jQuery对象是一个数组，在数组中存放本次定位的DOM对象。
jQuery对象与JavaScript对象是可以相互转化的，由于jQuery用起来更加方便，都是将JavaScript对象转化成jQuery对象。
下载jQuery
官网下载地址：https://jquery.com/download/
jQuery的不同版本中，2.xx不再支持IE6/7/8浏览器。现阶段IE6/7/8已经是淘汰的，非主流的。可以不用考虑兼容问题。
对于每一个同一版本号的jQuery，其库又分为两个，一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。
入门案例
( d o c u m e n t ) ， 将 D O M 对 象 d o c u m e n t 转 换 为 j Q u e r y 对 象 。 < b r / > (document)，将DOM对象document转换为jQuery对象。<br />(document)，将DOM对象document转换为jQuery对象。<br/>(document).ready()函数是当DOM对象加载完毕后，马上执行的函数。
**$(document).ready() 与 ( ) 、 j Q u e r y ( ) 、 w i n d o w . j Q u e r y ( ) 是 等 价 的 ∗ ∗ ， 所 以 ()、jQuery()、window.jQuery() 是等价的**，所以()、jQuery()、window.jQuery()是等价的∗∗，所以(document).ready() 可以写成 $(function(){ alert(“Hello jQuery”) });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定jQuery的库文件位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*
1. $(document)，$是jQuery中的函数名称，document是函数的参数
作用是 document对象变成jQuery函数库可以使用的对象。
2. ready：是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容。
ready相当于js中的onLoad事件
3. function() 自定义的，表示onLoad后要执行的功能。
*/
/* $(document).ready(function(){
alert("Hello jQuery")
}) */
$(function(){
alert("快捷方式")
})
</script>
</head>
<body>
</body>
</html>
DOM对象和jQuery对象
DOM对象是用JavaScript语法创建的对象，也看做是js对象。
1.DOM对象转换jQuery对象
使用 $(DOM对象) 方式，可以将DOM对象转换为jQuery对象，转换为jQuery对象才可以使用jQuery中提供的方法操作DOM对象。一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，习惯性地以$开头，这不是必须的。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象转为jQuery</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn")
// 使用dom的value属性获取值
alert("使用dom对象的属性=" + obj.value)
// 把dom对象转为jQuery，使用jQuery库中的函数
var $jobj = $(obj)
alert($jobj.val())
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()"/>
</body>
</html>
2.jQuery对象转为DOM对象
jQuery对象本身为数组对象，该数组中的第0个元素即为该jQuery对象对应的DOM对象。所以有两种方式可以获取到DOM对象：get(0) 和 下标[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>>
<script type="text/javascript">
function btnClick(){
// 使用jQuery的语法，获取页面的dom对象
var obj = $("#txt")[0]
// var obj = $("#txt").get(0)
var num = obj.value
obj.value = num * num
}
</script>
</head>
<body>
<div>
<input type="button" value="计算平方" onclick="btnClick()"/><br />
<input type="text" id="txt" value="整数"/>
</div>
</body>
</html>
选择器
选择器：就是定位条件：通知jQuery函数定位满足条件的DOM对象
基本选择器
根据 ID、class属性、标签类型名 定位HTML元素，转为jQuery对象。
1.id选择器
语法：$("#id")
2.class选择器
语法：$(".class名称")
3.标签选择器
语法：$("标签名")
4.所有选择器
语法：$("*")选取页面中所有DOM对象。
5.组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id、class、标签名等。
语法：$("#id,.class,标签名")
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
.two{
background: gold;
font-size: 19pt;
}
</style>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
// id选择器
var obj = $("#one")
// 使用jQuery中改变样式的函数
obj.css("background","red")
}
function fun2(){
// 使用样式选择器
var obj = $(".two")
obj.css("background","yellow")
}
function fun3(){
// 标签选择器
var obj = $("div") // 数组有3个对象
// jQuery的操作都是操作数组中的全部成员
// 所以是给所有的div都设置背景色
obj.css("background","blue")
}
function fun4(){
var obj = $("*")
obj.css("background","green")
}
function fun5(){
var obj = $("#one,span")
obj.css("background","red")
}
</script>
</head>
<body>
<div id="one">我是one的div</div><br />
<div class="two">我是样式是two的div</div><br />
<div>我是没有id和class的div</div><br />
<span class="two">我是span标签</span><br />
<input type="button" value="获取id是one的dom对象" onclick="fun1()"/><br />
<input type="button" value="使用class样式获取dom对象" onclick="fun2()"/><br />
<input type="button" value="使用标签选择器" onclick="fun3()"/><br />
<input type="button" value="所有选择器" onclick="fun4()"/><br />
<input type="button" value="组合选择器" onclick="fun5()"/><br />
</body>
</html>
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。
该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。
语法：$(":type的值")
例如：
( " : t e x t " ) 选 取 所 有 的 单 行 文 本 框 < b r / > (":text") 选取所有的单行文本框<br />(":text")选取所有的单行文本框<br/>(“:password”) 选取所有的密码框
( " : r a d i o " ) 选 取 所 有 的 多 选 框 < b r / > (":radio") 选取所有的多选框<br />(":radio")选取所有的多选框<br/>(“:checkbox”) 选取所有的多选框
$(“:file”) 选取所有的上传按钮
过滤器
jQuery对象中存储的DOM对象顺序与页面标签声明位置关系：
$(“div”) 拿到的是 [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中DOM对象进行过滤筛选，过滤条件不能独立出现在jquery函数，如果使用只能出现在选择器后方。
基本过滤器
- 选择第一个，保留数组中第一个DOM对象
语法：$("选择器:first")
- 选择最后一个，保留数组中最后的DOM对象
语法：$("选择器:last")
- 选择数组中指定对象
语法：$("选择器:eq(数组索引)")
- 选择数组中小于指定索引的所有DOM对象
语法：$("选择器:lt(数组索引)")
- 选择数组中大于指定索引的所有DOM对象
语法：$("选择器:gt(数组索引)")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background : gray
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// 过滤器
var obj = $("div:first")
obj.css("background","red")
})
$("#btn2").click(function(){
var obj = $("div:last")
obj.css("background","green")
})
$("#btn3").click(function(){
var obj = $("div:eq(3)")
obj.css("background","blue")
})
$("#btn4").click(function(){
var obj = $("div:lt(3)")
obj.css("background","orange")
})
$("#btn5").click(function(){
var obj = $("div:gt(3)")
obj.css("background","yellow")
})
})
</script>
</head>
<body>
<input type="text" id="txt"/>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br />
<span>我是span</span><br />
<input type="button" value="获取第一个div" id="btn1"/><br />
<input type="button" value="获取最后一个div" id="btn2"/><br />
<input type="button" value="获取下标等于3的div" id="btn3"/><br />
<input type="button" value="获取下标小于3的div" id="btn4"/><br />
<input type="button" value="获取下标大于3的div" id="btn5"/><br />
</body>
</html>
表单对象属性过滤器
根据表单中DOM对象的状态情况，定位dom对象。
启用状态enabled
不可用状态 disabled
选择状态 checked，例如radio和checkbox
- 选择可用的文本框
$(":text:enabled")
- 选择不可用的文本框
$(":text:disabled")
- 复选框选中的元素
$(":checkbox:checked")
- 选择指定下拉列表的被选中元素
$(选择器>option:selected)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled")
obj.val("hello")
})
$("#btn2").click(function(){
var obj = $(":checkbox:checked")
for(var i=0; i<obj.length; i++){
alert($(obj[i]).val())
}
})
$("#btn3").click(function(){
// var obj = $("select>option:selected")
var obj = $("#yuyan>option:selected")
alert(obj.val())
})
})
</script>
</head>
<body>
<input type="text" id="txt1" value="text1" /><br />
<input type="text" id="txt2" value="text2" disabled="true"/><br />
<input type="text" id="txt3" value="text3" /><br />
<input type="text" id="txt4" value="text4" disabled/><br />
<br />
<input type="checkbox" value="游泳"/>游泳<br />
<input type="checkbox" value="健身"/>健身<br />
<input type="checkbox" value="电子游戏"/>电子游戏<br />
<br />
<select id="yuyan">
<option value="java">java语言</option>
<option value="go">go语言</option>
<option value="python">python语言</option>
</select>
<br />
<input type="button" value="设置可用的text的value是hello" id="btn1" /><br />
<button id="btn2">显示选中的复选框的值</button><br />
<button id="btn3">显示选中下拉列表框的值</button>
</body>
</html>
函数
第一组
1. val
操作数组中DOM对象的 value 属性。$(选择器).val()：无参数调用形式，读取数组中第一个DOM对象的value属性值。$(选择器).val(值)：有参形式调用，对数组中所有DOM对象的value属性值进行统一赋值。
2. text
操作数组中所有DOM对象的 文字显示内容 属性。$(选择器).text()：无参数调用，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回。$(选择器).text(值)：有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值。
3. attr
对 val、text之外的其他属性操作$(选择器).attr("属性名")：获取DOM数组中第一个对象的属性值。$(选择器).attr("属性名","值")：对数组中所有DOM对象的属性设为新值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background : yellow
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var text = $(":text").val()
alert(text)
})
$("#btn2").click(function(){
$(":text").val("三国演义")
})
$("#btn3").click(function(){
alert($("div").text())
})
$("#btn4").click(function(){
$("div").text("新的div文本内容")
})
$("#btn5").click(function(){
alert($("img").attr("src"))
})
$("#btn6").click(function(){
$("img").attr("src","img/ex2.jpg")
})
})
</script>
</head>
<body>
<input type="text" value="刘备"/><br />
<input type="text" value="关羽"/><br />
<input type="text" value="张飞"/><br />
<br />
<div>1.我是第一个div</div>
<div>2.我是第二个div</div>
<div>3.我是第三个div</div>
<br />
<img id="image1" src="img/ex1.jpg"/><br />
<input type="button" id="btn1" value="获取第一个文本框的值"/><br />
<input type="button" id="btn2" value="设置所有文本框的value值"/><br />
<button id="btn3">获取所有div的文本值</button><br />
<button id="btn4">设置div的文本值</button><br />
<input type="button" id="btn5" value="读取src属性的值"/><br />
<input type="button" id="btn6" value="设置指定src属性的值"/><br />
</body>
</html>
第二组
1. hide
$(选择器).hide()：将数组中所有DOM对象隐藏起来。
2. show
$(选择器).show()：将数组中所有DOM对象在浏览器中显示出来。
3. remove
$(选择器).remove()：将数组中所有DOM对象及其子对象一并删除。
4. empty
$(选择器).empty()：将数组中所有DOM对象的子对象删除。
5. append
为数组中所有DOM对象添加子对象。$(选择器).append("<div>我动态添加的div</div>")
6. html
设置或返回被选元素的内容（innerHTML）。$(选择器).html()：无参数调用方法，获取DOM数组第一个元素的内容。$(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容。
7. each
each是对数组、json、dom数组循环处理，对每个元素调用一次函数。
语法1：$.each(要遍历的对象, function(index,element){ 处理程序 })：表示使用jquery的each，循环数组，每个数组成员都会执行后面的“处理函数”一次。
$：相当于java的一个类名
each：就是类中的静态方法。
处理函数：function(index,element)：
index，element 都是自定义的形参，名称自定义。
index：循环的索引
element：数组中的成员
语法2：jQuery对象.each(function(index,element){ 处理程序 })：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("select").remove()
})
$("#btn2").click(function(){
$("select").empty()
})
$("#btn3").click(function(){
$("#father").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr>")
})
$("#btn4").click(function(){
alert($("span").html()) //我是mysql <b>数据库</b>
})
$("#btn5").click(function(){
$("span").html("我是新的<b>数据</b>")
})
$("#btn6").click(function(){
// 循环普通数组，非dom数组
var arr = [1, 2, 3]
$.each(arr,function(i,n){
alert("循环变量：" + i + "，数组成员：" + n)
})
})
$("#btn7").click(function(){
// 循环json
var json = {"name":"张三","age":"20"}
$.each(json,function(i,n){
alert("key=" + i + ", value=" + n)
})
})
$("#btn8").click(function(){
var domArray = $(":text")
$.each(domArray,function(i,n){
alert("i=" + i + ", n=" + n.value)
})
})
$("#btn9").click(function(){
$(":text").each(function(i,n){
alert("i=" + i + ", n=" + n.value)
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备" /><br />
<input type="text" value="关羽" /><br />
<input type="text" value="张飞" /><br />
<br />
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br />
<br />
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br />
<br />
<div id="father">我是第一个div</div>
<br />
<br />
<span>我是mysql <b>数据库</b></span>
<br />
<span>我是jdbc</span>
<br />
<br />
<input type="button" value="使用remove删除父和子对象" id="btn1"/><br />
<input type="button" value="使用empty删除子对象" id="btn2"/><br />
<input type="button" value="使用append，增加dom对象" id="btn3"/><br />
<input type="button" value="获取第一个dom的文本值" id="btn4"/><br />
<input type="button" value="设置span的所有dom的文本值" id="btn5"/><br />
<input type="button" value="循环普通数组" id="btn6"/><br />
<input type="button" value="循环json" id="btn7"/><br />
<input type="button" value="循环dom数组" id="btn8"/><br />
<input type="button" value="循环jquery对象" id="btn9"/><br />
</body>
</html>
事件
为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作。
定义元素监听事件
语法：$(选择器).监听事件名称(处理函数)
监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click。
例如：
为页面中所有的button绑定onclick，并关联处理函数fun1。( " b u t t o n " ) . c l i c k ( f u n 1 ) < b r / > 为 页 面 中 所 有 的 t r 标 签 绑 定 o n m o u s e o v e r ， 并 关 联 处 理 函 数 f u n 2 。 ("button").click(fun1)<br />为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2。("button").click(fun1)<br/>为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2。(“tr”).mouseover(fun2)
on() 绑定事件
on()方法在被选元素上添加事件处理函数。该方法给API带来很多便利，推荐使用该方法。
语法：$(选择器).on(event, data, function)
event：事件一个或者多个，多个之间空格分开。
data：可选。规定传递到函数的额外数据，json格式。
function：可选。规定当事件发生时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// 在dom对象创建好后，绑定事件
$(function(){
$("#btn1").click(function(){
// 使用append增加dom对象
$("#mydiv").append("<input type='button' id='newBtn' value='我是新加入的按钮' />")
// 使用on给按钮绑定事件
$("#newBtn").on("click",function(){
alert("新建的按钮被单击了")
})
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div，需要增加一个button
</div>
<input type="button" value="创建一个button，绑定一个click" id="btn1"/>
</body>
</html>
AJAX
jQuey提供多个与AJAX有关的方法。通过jQuery AJAX方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。
$.ajax()
. a j a x ( ) 是 j Q u e r y 中 A J A X 请 求 的 核 心 方 法 ， 所 有 的 其 他 方 法 都 是 在 内 部 使 用 此 方 法 。 < b r / > 语 法 ： ‘ .ajax() 是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。<br />语法：`.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。<br/>语法：‘.ajax( {name:value, name:value, …} )`
说明：参数是json的结构，包含请求方式、数据、回调方法等。
async：布尔值，表示请求是否异步处理。默认是true。
contentType：发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data：要发送到服务器的数据，可以是：string、数组，多数是json。
dataType：期望从服务器响应的数据类型。默认的，jQuery会智能从xml、json、text、html这些中判断最可能的类型。
“xml” - 一个XML文档
“html” - HTML作为纯文本
“text” - 纯文本字符串
“json” - 以JSON允许响应，并以对象返回
error(xhr, status, error)：请求失败要运行的函数。其中 xhr, status, error是自定义的形参名。
success(result, status, xhr)：当请求成功时运行的函数，其中 result, status, xhr是自定义的形参名。
type：规定请求的类型（GET或POST等），默认是GET，get、post不用区分大小写。
url：规定发送请求的URL。
以上是常用的参数，error()和success()中的xhr是XMLHttpRequest对象。
例如：
$.ajax({
async: true,
contentType: “application/json”,
data: {name:“list”,age:20},
dataType: “json”,
error: function(){
请求出现错误时，执行的函数
},
success: function(data){
// data就是responseText，是jQuery处理后的数据。
},
url: “bmiAjax”,
type: “get”
})
$.get()
. g e t ( ) 方 法 使 用 H T T P G e t 请 求 从 服 务 器 加 载 数 据 。 < b r / > 语 法 ： ‘ .get()方法使用 HTTP Get 请求从服务器加载数据。<br />语法：`.get()方法使用HTTPGet请求从服务器加载数据。<br/>语法：‘.get(url,data,function(data,status,xhr),dataType)`
url：必需。
data：可选。请求发送到服务器的数据。
function(data,status,xhr)：可选。当请求成功时运行的函数。data,status,xhr是自定义形参名。
data - 包含来自请求的结果数据。
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）。
xhr - 包含XMLHttpRequest对象。
dataType：可选。预期的服务器响应的数据类型。默认地，jQuery会智能判断。
$.post()
. p o s t ( ) 方 法 使 用 H T T P P o s t 请 求 从 服 务 器 加 载 数 据 。 < b r / > 语 法 ： ‘ .post()方法使用 HTTP Post 请求从服务器加载数据。<br />语法：`.post()方法使用HTTPPost请求从服务器加载数据。<br/>语法：‘.post(URL,data,function(data,status,xhr),dataType)`
使用AJAX实现级联查询
前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市级联查询</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function loadDataAjax() {
// 做ajax请求，使用jQuery的$.ajax()
$.ajax({
url: "queryProvince",
dataType: "json",
success: function (data) {
// 删除旧的数据
$("#province").empty()
$.each(data, function (i, n) {
// 获取select这个dom对象
$("#province").append("<option value='" + n.id + "'>" + n.name + "</option>")
})
}
})
}
$(function () {
loadDataAjax()
// 绑定事件
$("#btnLoad").click(function () {
loadDataAjax()
})
$("#province").change(function () {
// 获取选中的列表框的值
var obj = $("#province>option:selected")
var provinceId = obj.val()
// 做一个ajax请求，获取省份的所有城市信息
$.post("queryCity", {proid: provinceId}, callback, "json")
})
})
// 定义一个处理返回数据的函数
function callback(resp) {
// 清空select列表
$("#city").empty()
$.each(resp, function (i, n) {
$("#city").append("<option value='" + n.id + "'>" + n.name + "</option>")
})
}
</script>
</head>
<body>
<p>省市级联查询，使用ajax</p>
<div>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>省份：</td>
<td>
<select id="province">
<option value="0">请选择...</option>
</select>
<input type="button" id="btnLoad" value="load数据"/>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city">
<option value="0">请选择...</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
后端代码
package com.bjpowernode.controller;
import com.bjpowernode.dao.QueryDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
public class QueryProvinceServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
String json = "{}";
// 调用dao，获取所有的省份信息，是一个List集合
QueryDao dao = new QueryDao();
List<Province> provinces = dao.queryProvinceList();
// 把list转为json格式的数据，，输出给ajax请求
if (provinces != null) {
// 调用jackson工具库，实现List -> json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(provinces);
}
// 输出json数据，响应ajax请求
response.setContentType("application/json;charset=UTF-8");
response.getWriter().print(json);
}
}
package com.bjpowernode.controller;
import com.bjpowernode.dao.QueryDao;
import com.bjpowernode.entity.City;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
public class QueryCityServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
String json = "{}";
// 获取请求传过来的省份id
String proid = request.getParameter("proid");
if (proid != null && !"".equals(proid.trim())) {
QueryDao dao = new QueryDao();
List<City> cityList = dao.queryCityList(Integer.valueOf(proid));
// 把List转为json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(cityList);
}
response.setContentType("application/json;charset=UTF-8");
response.getWriter().print(json);
}
}
package com.bjpowernode.dao;
import com.bjpowernode.entity.City;
import com.bjpowernode.entity.Province;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class QueryDao {
private Connection conn;
private PreparedStatement ps;
private ResultSet rs;
private String sql;
private String url = "jdbc:mysql://localhost:3306/bjpowernode?serverTimezone=Asia/Shanghai&useSSL=false" +
"&characterEncoding=UTF-8&useUnicode=true";
private String username = "root";
private String password = "123456";
// 查询所有的省份信息
public List<Province> queryProvinceList() {
List<Province> provinces = new ArrayList<>();
try {
Province p = null;
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
sql = "select id,name,jiancheng,shenghui from province order by id";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
p = new Province();
p.setId(rs.getInt("id"));
p.setName(rs.getString("name"));
p.setJiancheng(rs.getString("jiancheng"));
p.setShenghui(rs.getString("shenghui"));
provinces.add(p);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
return provinces;
}
// 查询所有的省份信息
public List<City> queryCityList(Integer provinceId) {
List<City> cities = new ArrayList<>();
try {
City city = null;
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
sql = "select id,name from city where provinceId = ?";
ps = conn.prepareStatement(sql);
// 设置省份的参数值
ps.setInt(1, provinceId);
rs = ps.executeQuery();
while (rs.next()) {
city = new City();
city.setId(rs.getInt("id"));
city.setName(rs.getString("name"));
cities.add(city);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
return cities;
}
}
