开篇基础
jQuery是一款主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作。
官网地址：https://jquery.com/
官网首页 jQuery 介绍：
原文翻译：
jQuery是一个快速，小巧，功能丰富的JavaScript库，它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
为什么使用jQuery
非常重要的理由就是：它能够兼容市面上主流的浏览器，IE和FireFox，Google Docs浏览器处理Ajax，创建异步对象是不同的，而jQuery能够使用一种方式在不同的浏览器创建Ajax异步对象。
其他优点：
（1）写少代码，做多事情【write less do more】
（2）免费，开源且轻量级别的js库，容量很小
（3）兼容市场上主流浏览器，例如：IE，Firefox，Chrome
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步Ajax功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种js组件，例如日历组件（点击按钮显示日期）
（7）出错后，有一定的提示信息
（8）不用再在HTML里面通过<script>标签插入一大堆js来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。
DOM对象
文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
通过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，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。
牛刀小试
编写jQuery的工具很多，能编写HTML的工具都支持jQuery，例如记事本、，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA。
单独学习jQuery库使用，可以轻量的开发工具，例如EditPlus , HBuilder,HbuilderX。编写项目可以使用集成开发工具，例如在 IDEA， Eclipse , MyEclipse ,WebStorm 等。
第一个例子完成：浏览器完全装载 html 页面 DOM 后,显示一个提示信息框
实现步骤：
1.使用 HBuilder 或 HbuilderX, idea 都可以，以 HbuilderX 为工具，创建一个项目（名称：
jquery-course），给项目选择一个文件存放目录。
2. 在项目中再创建一个目录
右键项目名称—新建—目录，常用名称为 js
3.拷贝下载的 jQuery.js 文件到目录
4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
5、 $(document)，将 DOM 对象 document 转换为 jQuery 对象。$(document).ready()函数是当DOM 对象加载完毕后，马上执行的函数。
$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );
6.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jQuery例子</title>
<script type="text/javascript"src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
//把JavaScript中的document对象转换为jQuery对象
//使用jQuery中的方法ready，当DOM对象全部创建完成后，执行function中的内容
$(document).ready(function(){
alert("Hello jQuery")
})
</script>
</head>
<body>
</body>
</html>
DOM对象和jQuery对象
DOM对象是用JavaScript语法创建的对象，也看做是js对象。
DOM对象转换jQuery对象：
使用$(DOM 对象)方式，可以将DOM对象转换为jQuery对象，转换为jQuery对象才可以使用jQuery中提供的方法，操作DOM对象，一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，习惯性的以$开头，这不是必须的。
例如：
新建HTML页面文件domTojQuery.html
1.页面加入按钮 button
<body>
<div align="center">
<input type="button" id="btn" value="我要成为jQuery对象" onclick="btnClick()" />
</div>
</body>
2.转换 DOM 对象
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用js方法获取DOM对象
var domBtn = document.getElementById("btn");
alert("1="+domBtn.value)
//使用jQuery函数$()把DOM对象转换jQuery对象
var $btn = $(domBtn);
//调用jQuery方法val()
alert("2="+$btn.val());
}
</script>
jQuery对象转换为DOM对象
jQuery对象本身为数组对象，该数组中的第0个元素即为改jQuery对象对应的DOM对象，所以有两种方式可以获取到DOM对象：get(0)方式与下标[0]
例：新建 html 文件 jQueryToDom.html
1.页面添加 text ，button
<body>
<div align="center">
<input type="button" id="btn" value="计算平方" onclick="btnClick()"/>
<input type="text" id="txt" value="输入整数" />
</div>
</body>
2、Query 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function btnClick(){
//从jQuery对象数组中，第0个对象为DOM对象
//var domObj = $("#txt").get(0);
var domObj = $("#txt")[0];
//使用DOM对象的属性value
var num = domObj.value;
domObj.value = num * num;
}
</script>
选择器
选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象
基本选择器
根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象.
1.id 选择器
语法：$(“#id”)
2.class 选择器
语法：$(“.class 名称”)
3. 标签选择器
语法：$(“标签名”)
例：新建 selector.html
1.在页面 head 部分加入 css
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
2.加入 jQuery 引用
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
3.body 部分定义 div
<body>
<div id="one">我是id = one 的div</div>
<br>
<div class="two">我是class = two的div</div>
<br>
<span>我是一行数据</span>
<br>
操作按钮：<br>
<input type="button" value="选取id=one" onclick="fun1()"/>
<input type="button" value="选取classs=two" onclick="fun2()"/>
<input type="button" value="选取div" onclick="fun3()"/>
</body>
4.创建 js 函数
<script type="text/javascript">
function fun1(){
$("#one").css("background","blue");
}
function fun2(){
$(".two").css("background","red");
}
function fun3(){
//所有的div，$("div")是jQuery数组，对数组内全部成员统一处理
$("div").css("background","orange");
}
</script>
所有选择器
语法：$(“*”) 选取页面中所有 DOM 对象。
组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)
例：
1.上面的 selector.html 页面中加入按钮
<input type="button" value="所有DOM" onclick="fun4()"/>
<input type="button" value="选取两个DOM对象" onclick="fun5()"/>
2.增加 js 函数
function fun4(){
//页面全部
$("*").css("background","yellow");
}
function fun5(){
//id是one,标签是<span>
$("#one,span").css("background","pink");
}
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
$(":tr"): 不能用，tr 不是 input 标签
语法： $(":type 属性值")
例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
例：
新建 form.html
页面定义元素：
<body>
文本框：<input type="text" value="我是type=text" /><br>
性别：<br>
<input type="radio" name="sex" value="man"/>男<br>
<input type="radio" name="sex" value="woman"/>女<br>
爱好：<br>
<input type="checkbox" value="bike" />骑行<br>
<input type="checkbox" value="football" />足球<br>
<input type="checkbox" value="music" />音乐<br>
<br>
<p>功能按钮</p>
<input type="button" value="读取text值" onclick="fun1()"/>
<input type="button" value="读取radio值" onclick="fun2()"/>
<input type="button" value="读取checkbox值" onclick="fun3()"/>
</body>
定义 js 函数：
<script type="text/javascript">
function fun1(){
var $obj = $(":text");
//获取第一个DOM对象的值
alert($obj.val());
}
function fun2(){
var $obj = $(":radio");
for(var i = 0;i < $obj.length;i++){
//jQuery对象转为DOM对象
var obj = $obj[i];
alert(obj.value);
}
}
function fun3(){
var $obj = $(":checkbox");
for(var i = 0;i < $obj.length;i++){
//jQuery对象转为DOM对象
var obj = $obj[i];
alert(obj.value);
//jQuery对象的用法
alert($($obj[i]).val());
}
}
</script>
过滤器
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
基本过滤器
选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
选择最后个 last, 保留数组中最后 DOM 对象
语法：$("选择器:last")
选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
实例操作
1.定义样式
<style type="text/css">
div{
background: gray;
}
</style>
2.页面加入 div
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div >
我是第三个div-2
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<div >我是div-5</div>
<br>
<span >我是span</span>
<br>
<p>功能按钮</p>
<input type="button" id="btn1" value="选择第一个div" /><br>
<input type="button" id="btn2" value="选择最后一个div" /><br>
<input type="button" id="btn3" value="选择索引等于3的div" /><br>
<input type="button" id="btn4" value="选择索引小于3的div" /><br>
<input type="button" id="btn5" value="选择索引大于3的div" /><br>
3.定义 js 函数
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//jQuery绑定事件
$("#btn1").click(function(){
$("div:first").css("background","blue");
})
$("#btn2").click(function(){
$("div:last").css("background","pink");
})
$("#btn3").click(function(){
$("div:eq(3)").css("background","orange");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","yellow");
})
$("#btn5").click(function(){
$("div:gt(3)").css("background","yellow");
})
})
</script>
表单对象属性过滤器
选择可用的文本框
$(“:text:enabled”)
选择不可用的文本框
$(“:text:disabled”)
复选框选中的元素
$(“:checkbox:checked”)
选择指定下拉列表的被选中元素
选择器>option:selected
例：
创建 filterForm.html
页面：
<body>
<p>文本框</p>
<input type="text" id="text1" value="text1" /><br>
<input type="text" id="text2" value="text2" disabled/><br>
<input type="text" id="text3" value="text3" /><br>
<input type="text" id="text4" value="text4" disabled/><br>
<br>
<p>复选框</p>
<input type="checkbox" value="游戏" />游戏<br>
<input type="checkbox" value="健身" />健身<br>
<input type="checkbox" value="电子游戏" />电子游戏<br>
<br>
<p>下拉框</p>
<select id="lang">
<option value ="java">java语言</option>
<option value ="go"selected>go语言</option>
<option value ="sql">sql语言</option>
</select>
<p>功能按钮</p>
<button id="btn1">所有可用的text设值hello</button><br>
<button id="btn2">显示被选中的复选框的值</button><br>
<button id="btn3">显示下拉列表选中的值</button><br>
</body>
js 函数
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//jquery绑定事件
$("#btn1").click(function(){
$(":text:enabled").val("Hello")
})
$("#btn2").click(function(){
var $obj = $(":checkbox:checked");
$obj.each(function(i,n){
alert("第"+i+"个成员，DOM值是:"
+n.value+"jQuery独享取值："+$(n).val());
})
})
$("#btn3").click(function(){
//有选中的第一个select的option
var $obj = $("select > option:selected");
alert($obj.val()+" "+$obj.text());
//选择id = lang de select
//var $obj = $("#lang > option:selected");
//alert($obj.val()+ " "+$obj.text());
})
})
</script>
函数
第一组
val
操作数组中DOM对象的value属性。
$(选择器).val(): 无参数调用形式，读取数组中第一个DOM独享的value属性值
$(选择器).val(值)： 有参形式调用；对数组中所有DOM对象的value属性值进行统一赋值
text
操作数组中所有DOM对象的【文字显示内容属性】
$(选择器).text(): 无参数调用，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值)： 有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值
attr
对val，text之外的其他属性操作
$(选择器).attr("属性名"): 获取DOM数组第一个对象的属性值
$(选择器).attr("属性名"，“值”)： 对数组中所有DOM对象的属性设为新值
例如：
创建fun1.html
样式：
<style type="text/css">
div{
background: blue;
}
</style>
页面：
<body>
<p>文本框val</p>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞" /><br>
<p>文本数据text</p>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div>我是第三个div</div>
<p>图片</p>
<img id="img1" src="img/ex1.jpg" ><br>
<img id="img1" src="img/ex2.jpg" ><br>
<p>功能按钮</p>
<button id="btn1">获取第一个文本框的值</button><br>
<button id="btn2">设值所有文本框为新值</button><br>
<button id="btn3">获取div的所有文本</button><br>
<button id="btn4">获取第一个div的文本</button><br>
<button id="btn5">设值div新文本</button><br>
<button id="btn6">设值img图片</button><br>
</body>
js函数：
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//jQuery绑定事件
$("#btn1").click(function(){
var txt = $(":text").val();
alert("我是多个text的第一个："+text);
})
$("#btn2").click(function(){
$(":text").val("王者荣耀还是三国志")
})
$("#btn3").click(function(){
alert($("div").text());
})
$("#btn4").click(function(){
alert($("div:first").text());
})
$("#btn5").click(function(){
$("div").text("我是小强")
})
$("#btn6").click(function(){
alert($("img").attr("src"));
$("img").attr("src","img/ex3.jpg")
})
})
</script>
第二组
hide
$(选择器).hide(): 将数组中所有DOM对象隐藏起来
show
$(选择器).show(): 将数组中所有DOM对象在浏览器中显示起来
remove
$(选择器).remove(): 将数组中所有DOM对象及其对象一并删除
empty
$(选择器).empty(): 将数组中所有DOM对象的子对象删除
append
为数组中所有DOM对象添加子对象
$(选择器).append("<div>我动态添加的div</div>")
html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html(): 无参数调用方法，获取DOM数组第一个元素的内容。
$(选择器).html(值)： 有参数调用，用于设置DOM数组中所有元素的内容。
each
each书对数组，json和dom数组等的遍历，对每个元素调用一次函数。
语法1：
$each(要遍历的对象，function(index,element){处理程序})
语法2：
index: 数组的下标
element： 数组的对象
例如：
新建 fun2.html
样式：
<style type="text/css">
div{
background:blue ;
}
</style>
页面：
<body>
<p>show和hide</p>
<div id="one">我是one</div>
<div id="two">我是two</div>
<p>remove和empty</p>
<select>
<option >老虎</option>
<option >狮子</option>
<option >豹</option>
</select>
<br>
<select>
<option >大洋洲</option>
<option >欧洲</option>
<option >美洲</option>
</select>
<br>
<p>append</p>
<div id="father" style="background: red;">我是父div</div>
<br>
<p>html</p>
<span>mysql是一个<b>数据库</b></span><br>
<span>使用JDBC访问数据库</span><br>
<p>功能按钮</p>
<button id="btn1">隐藏所有div</button><br>
<button id="btn2">显示所有div</button><br>
<button id="btn3">清除所有下拉列表中option子标签</button><br>
<button id="btn4">删除所下拉列表</button><br>
<button id="btn5">添加元素</button><br>
<button id="btn6">获取第一个span文本内容</button><br>
<button id="btn7">设置span的内容</button><br>
<button id="btn8">each循环</button><br>
</body>
js函数：
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$("#btn1").click(function(){
$("div").hide();
})
$("#btn2").click(function(){
$("div").show();
})
$("#btn3").click(function(){
$("select").empty();
})
$("#btn4").click(function(){
$("select").remove();
})
$("#btn5").click(function(){
$("#father").append("<input type = 'text' value = '我是动态添加的input'/>");
})
$("#btn6").click(function(){
alert($("span").html());
})
$("#btn7").click(function(){
$("span").html("我是span标签");
})
$("#btn8").click(function(){
$("span").each(function(i,n){
alert("索引："+i+" "+n.innerHTML);
})
})
</script>
each用法
页面上加入text
<p>文本框val</p>
<input type="text" value="刘备" /><br>
<input type="text" value="关羽" /><br>
<input type="text" value="张飞" /><br>
<button id="9">遍历数组</button><br>
<button id="btn10">遍历json对象</button><br>
<button id="btn11">遍历dom对象</button><br>
加入三个按钮，创建点击事件
$("#9").click(function(){
//遍历数组
var arr = ["a","b","c"];
$.each(arr,function(i,n){alert("数组下标："+i+",成员是:"+n)})
})
$("#btn10").click(function(){
//遍历json对象
var arr = {name:"zhangsan",age:20};
$.each(arr,function(i,n){alert("key是："+i+",value是:"+n)})
})
$("#btn11").click(function(){
//遍历dom数组
$.each($(":text"),function(i,n){alert("下标是："+i+",dom的value是:"+n.value)})
})
或者
$("#btn11").click(function(){
//遍历dom数组
$(":text").each(function(i,n){alert("下标是："+i+",dom的value是:"+n.value)})
})
事件
为页面元素绑定事件，即对于制定页面元素，当某个事件发生后，执行指定动作
定义元素监听事件
语法：
$(选择器).箭筒事件名称(处理函数);
说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click
例如：
为页面中所有的button绑定onclick，并关联处理函数fun1
$("button").click(fun1)
为页面中所有的tr标签绑定onmouseover，并观看处理函数fun2
$("tr").mouseover(fun2)
on()绑定事件
on()方法在被选元素上添加事件处理程序。改方法给API带来很多便利，推荐使用该方法
语法：
$(选择器).on(event,data,function)
event:事件一个或多个，多个之间空格分开
data:可选。规定传递到函数的额外数据，json格式
function：可选。规定当事件发生时运行的函数，
例如：
新建event.html
样式：
<style type="text/css">
div{
background: gray;
width: 200px;
height: 80px;
}
</style>
页面：
<body>
<p>功能按钮</p>
<button id="btn1">动态添加Button</button>
<br><br>
<div id="mydiv"></div>
<p>可以 click me</p>
</body>
js函数：
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("btn1").on("click",function(){
$("#mydiv").append(
"<button id = 'mybutton'>我是添加的NewButton</button>"
);
$("mybutton").on("click",function(){
alert("NewButton被点了");
});
})
$("p").on("click",{name:"zhangsan"},function(event){
//event.data获取传入的参数，event是自定义名称
alert(event.data.name)
})
})
</script>
AJAX
jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，你能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接收的数据更新到DOM对象。
$.ajax()
$ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.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对象。
$.get()
$.get()方法使用HTTP GET请求从服务器加载数据。
语法：
$.get(url,data,function(data,status,xhr),dataType)
url 必需，规定你需要请求的URL。
data 可选，规定联通请求发送到服务器的数据。
function(data,status,xhr)可选，当请求成功时运行的函数。data,status,xhr是自定义形参名。
参数说明：
data- 包含来自请求的结果数据
status -包含请求的状态("success"、"notmodified"、"error"、"timeout"、"paraererror")
xhr - 包含XMLHttpRequest对象
dataType可选，规定预期的服务器响应的数据类型。默认地，jQuery会智能判断，可能的类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：
$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()
使用AJAX级联查询
效果图
数据库：springdb
province：省份表
city:城市表
1.IDEA创建web项目（ajax-jquery）
2.配置web运行环境Tomcat
发布项目：
3.module添加servlet的jar包
之后选中Tomcat
5.添加mysql驱动和jackson的jar
在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件
其他处理步骤同添加 mysql 驱动。
6.创建目录 js，拷贝 jQuery.js 文件
7.创建实体类
public class Province {
// 主键id
private Integer id;
// 省份名称
private String name;
// 省份简称
private String jiancheng;
// 省会名称
private String shenghui;
//set|get方法
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
}
public class City {
// 城市id
private Integer id;
// 城市名称
private String name;
// 省份id
private Integer provinceId;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getProvinceId() {
return provinceId;
}
public void setProvinceId(Integer provinceId) {
this.provinceId = provinceId;
}
}
8.创建 QueryDao 查询数据
1）定义成员变量
public class QueryDao {
private Connection conn = null;
private PreparedStatement pst = null;
private ResultSet rs = null;
private String url = "jdbc:mysql://localhost:3306/springdb";
private String username = "root";
private String password = "123456";
2）关闭资源的方法
private void close(Connection conn, Statement pst,ResultSet rs){
try {
if (rs != null){
rs.close();
}
if (pst != null) {
pst.close();
}
if (conn == null) {
conn.close();
}
} catch (Exception ex) {
ex.printStackTrace();
}
}
3）查询所有省份名称
public List<Province> selectProvince(){
List<Province> retList = new ArrayList<>();
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
String sql = "select id,name,jiancheng,shenghui from province ordder by id";
pst = conn.prepareStatement(sql);
rs = pst.executeQuery();
while (rs.next()){
Province pro = new Province();
pro.setId(rs.getInt(1));
pro.setName(rs.getString(2));
pro.setJiancheng(rs.getString("jiancheng"));
pro.setShenghui(rs.getNString("shenghui"));
retList.add(pro);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
close(conn,pst,rs);
}
return retList;
}
4）查询省份的城市列表
public List<City> selectCity(Integer proId){
List<City> retList = new ArrayList<>();
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
String sql = "select id,name,provinceId=? order by id";
pst = conn.prepareStatement(sql);
pst.setInt(1,proId);
rs = pst.executeQuery();
while (rs.next()){
City city = new City();
city.setId(rs.getInt("id"));
city.setName(rs.getString("name"));
city.setProvinceId(rs.getInt("provinceId"));
retList.add(city);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
close(conn,pst,rs);
}
return retList;
}
9.创建查询省份的 Servlet – QueryProvice
import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class QueryProvince extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response )throws ServletException, IOException {
String json = "{}";
QueryDao queryDao = new QueryDao();
List<Province> provinces = queryDao.selectProvince();
if (provinces != null) {
//List转为JsonArray
ObjectMapper mapper = new ObjectMapper();
json = mapper.writeValueAsString(provinces);
}
//设置输出内容是JSON，编码是utf-8
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(json);
out.flush();
out.close();
}
}
10.创建查询城市的 Servlet — QueryCity
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class QueryCity extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws SecurityException, IOException{
String json = "{}";
String proId = request.getParameter("proId");
QueryDao queryDao = new QueryDao();
List<City> cities = queryDao.selectCity(Integer.parseInt(proId));
if (cities != null) {
//List转为JsonArray
ObjectMapper mapper = new ObjectMapper();
json = mapper.writeValueAsString(cities);
}
//设置输出内容是json，编码是utf-8
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(json);
out.flush();
out.close();
}
}
11.web.xml 注册 Servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>queryProvince</servlet-name>
<servlet-class>com.bjpowernode.controller.QueryProvince</servlet-class>
</servlet>
<servlet>
<servlet-name>queryProvince</servlet-name>
<servlet-class>com.bjpowernode.controller.QueryCity</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>queryProvince</servlet-name>
<url-pattern>queryProvince</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>queryCity</servlet-name>
<url-pattern>queryCity</url-pattern>
</servlet-mapping>
</web-app>
12.修改 index.jsp
页面：
<div align="center">
<table >
<tr>
<td>省份列表：</td>
<td>
<select id="province">
<option value ="0">请选择....</option>
</select>
</td>
<td><button id="addProvince">获取省名</button></td>
</tr>
<tr>
<td>城市列表：</td>
<td>
<select id="city">
<option value ="0">请选择...</option>
</select>
</td>
</tr>
</table>
</div>
js函数：
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完成后，单击按钮获取省份名称
$("#addProvince").click(function(){
$ajax({
url:"queryProvince",
type:'GET',
dataType:'json',
success:function(result){
$("#province").empty();
$("#province").append(
"<option value ='0'>请选择....</option>"
);
$.each(result,function(i,n){
$("#province").append(
"<option value = '"+n.id"'>"+n.name+"</option>"
);
})
},
error:function(xhr,status,error){
alert("请求错误："+error)
}
})
})
//选择省份，查询城市列表
$("#province").on("chang",function(){
var proId = $("#province > option:selected").val();
if(proId == "0"){
alert("请选择一个有效的省份")
}else{
$.post("queryCity",{proId:proId},callback,"json");
}
})
function callback(result){
$("#city").empty();
$("#city").append(
"<option value ='0'>请选择....</option>"
);
$.each(result,function(i,n){
$("#city").append(
"<option value = '"+n.id"'>"+n.name"</option>"
);
})
}
})
</script>
下一篇：网络协议详解
扫一扫
3115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
