目录
文章目录
1. jQuery介绍
1.1 什么是jQuery
jQuery是js库
库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 放的用js代码写的function
1.2 一个简单的例子
如何引入jquery-3.6.1.js文件，注意引入js文件是用的src属性。
$(document).ready()与$()、Query()、window.jQuery()是等价的，$()最常用
<head>
<meta charset="UTF-8">
<title>第一个例子</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
/*
1. $(document),$是jQuery中的函数名称，document是函数的参数，作用是将document对象变成
jQuery函数库可以使用的对象
2. ready：是jQuery中的函数，当页面的dom对象加载完成后会执行ready函数的内容。相当于js
中的onLoad事件
3. function()洗定义的表示onLoad后要执行的功能。
*/
/* $(document).ready(
function () {
//自定义的功能代码
alert("hello jQuery")
}
) */
//以上也可以简写为下面这种方式
$(function () {
//自定义的功能代码
alert("hell")
})
</script>
</head>
1.3 dom对象和jQuery对象
- dom对象：
使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById(“txt1”); obj是dom对象，也叫做js对象- jquery对象：
使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数>组。现在数组中就一个值。- dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用>[0]或者get{0).- 为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者属性。
当你是dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
- dom对象转为jQuery对象
<head>
<meta charset="UTF-8">
<title>dom对象转为jQuery对象</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function btnClick() {
//获取dom对象
var obj = document.getElementById("btn");
alert("dom对象:" + obj.value);
//转为jQuery对象,jQuery对象命名通常以$开头
var $obj = $(obj);
alert("jQuery对象:" + $obj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
</body>
- jQuery对象转为dom对象
<head>
<meta charset="UTF-8">
<title>jQuery对象转为dom对象</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function btnClick() {
//使用jQuery的语法，获取页面中的dom对象
//从数组中获取下标为0的dom对象
//var obj = $("#txt")[0];
var obj = $("#txt").get(0);
var num = obj.value;
obj.value = num * num;
}
</script>
</head>
<body>
<input type="button" id="btn" value="计算平方" onclick="btnClick()" /><br />
<input type="text" id="txt" value="整数" />
</body>
2. 选择器
2.1 基本选择器
选择器就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
常用的选择器：
- id选择器：语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。- class选择器：语法： $(“.class样式名”)
class表示css中的样式， 使用样式的名称定位dom对象的。- 标签选择器：语法： $(“标签名称”)
使用标签名称定位dom对象的- 全部选择器： 语法：$(“*”)
- 组合选择器： 语法: $(“#dom对象的id值, .class样式名, 标签名称”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器使用</title>
<style type="text/css">
div {
background: gray;
width: 200px;
height: 100px;
}
.two {
background: gold;
font-size: 20px;
}
</style>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function fun1() {
//id选择器
var $obj = $("#one");
//使用jQuery中改变样式的函数
$obj.css("background", "red");
}
function fun2() {
//class选择器
var $obj = $(".two");
//使用jQuery中改变样式的函数
$obj.css("background", "yellow");
}
function fun3() {
//标签选择器
var $obj = $("div");//数组有3个对象
//使用jQuery中改变样式的函数
//jQuery的操作都是操作数组中的全部成员,所以是给所有的div都设置背景色
$obj.css("background", "blue");
}
function fun4() {
var $obj = $("*");
$obj.css("background", "green");
}
function fun5() {
var $obj = $("#one,span");
$obj.css("background", "orange");
}
</script>
</head>
<body>
<div id="one">我是id为one的div</div><br />
<div class="two">我是class为two的div</div><br />
<div>我是没有id和class的div</div><br />
<span>我是span标签</span><br />
<input type="button" value="获取id是one的dom对象" onclick="fun1()" /><br />
<input type="button" value="获取class是two的dom对象" onclick="fun2()" /><br />
<input type="button" value="使用标签选择器" onclick="fun3()" /><br />
<input type="button" value="所有选择器" onclick="fun4()" /><br />
<input type="button" value="组合选择器，选择one和span" onclick="fun5()" /><br />
</body>
</html>
2.2 表单选择器
语法：$(“: type属性值”)
ps：表单选择器跟是否有form无关，只要有标签，都可以通过该input标签的type属性定位到dom对象例如：$(“: text”)选取所有的文本框，$(“: password”)选取所有的密码框，$(“: tr”)不能用，因为type没有tr这个属性
注意：得到的jQuery对象是数组，因此如果不进行循环遍历的话，对数组操作只会对第一个dom对象操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器使用</title>
<style type="text/css">
div {
background: gray;
width: 200px;
height: 100px;
}
.two {
background: gold;
font-size: 20px;
}
</style>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function fun1() {
//表单选择器
var $obj = $(":text");
//获取value的值
alert($obj.val());
}
function fun2() {
//表单选择器
var $obj = $(":radio");
//获取value的值,遍历数组!!!!!!
for (var i = 0; i < $obj.length; i++) {
//注意不能用$obj[i].val()!!!!!!
var obj = $obj[i];
alert(obj.value);
}
}
function fun3() {
//表单选择器
var $obj = $(":checkbox");
//获取value的值,遍历数组!!!!!!
for (var i = 0; i < $obj.length; i++) {
var obj = $obj[i];
alert(obj.value);
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text" /><br />
<input type="radio" value="male" />男<br />
<input type="radio" value="female" />女<br />
<input type="checkbox" value="bike" />自行车<br />
<input type="checkbox" value="football" />足球<br />
<input type="checkbox" value="music" />音乐<br />
<input type="button" value="读取text值" onclick="fun1()" /><br />
<input type="button" value="读取radio值" onclick="fun2()" /><br />
<input type="button" value="读取checkbox值" onclick="fun3()" /><br />
</body>
</html>
3. 过滤器
3.1 基本过滤器
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
- 过滤器也是一个字符串，是用来筛选dom对象。
过滤器不能单独使用， 必须和选择器一起使用。
- $(“选择器:first”) : 第一个dom对象
$(“选择器:last”): 数组中的最后一个dom对象
$(“选择器:eq(数组的下标)”) ：获取指定下标的dom对象
$(“选择器:lt(下标)”) ： 获取小于下标的所有dom对象 less than
$(“选择器:gt(下标)”) ： 获取大于下标的所有dom对象 greater than
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器使用</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function () {
//绑定事件只能在这里面绑定
$("#btn1").click(function () {
//过滤器
var $obj = $("div:first");
$obj.css("background", "red");
})
$("#btn2").click(function () {
//过滤器
var $obj = $("div:last");
$obj.css("background", "green");
})
//注意这里的用法，很妙
$(":button:eq(2)").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>
<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>
3.2 表单属性过滤器
表单属性过滤器： 根据表单中dom对象的状态情况定位dom对象。
- 启用状态：enabled
不可用状态：disabled
选择状态：checked ， 例如radio， checkbox- 例子：
$(“：text：enabled”) 选择可用的文本框
$(“：text：disabled”) 选择不可用的文本框
$(“：checkbox：checked”) 选择复选框选中的元素
选择器>option：selected 选择指定下拉列表的被选中元素>表示父子关系 父>子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器使用</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function(){
$("#btn1").click(function(){
//获取所有可以使用的text
var $obj=$(":text:enabled");
//设置jQuery数组中所有dom对象的value值
$obj.val("hello");
})
$("#btn2").click(function(){
//获取选中的复选框
var $obj=$(":checkbox:checked");
for(var i=0;i<$obj.length;i++){
alert($obj[i].value);
}
})
$("#btn3").click(function(){
//获取选中的下拉列表框
//select前面没有冒号，它不是input标签type的值!!!
//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 /><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="健身" checked />健身<br />
<input type="checkbox" value="游戏" checked />游戏<br />
<br />
<select id="yuyan">
<option value="java">java</option>
<option value="go" selected>go</option>
<option value="python">python</option>
</select>
<br />
<input type="button" value="设置可用的text的value是hello" id="btn1" /><br />
<input type="button" value="显示所有选中的复选框的值" id="btn2" /><br />
<input type="button" value="显示下拉列表框" id="btn3" /><br />
</body>
</html>
4. 函数
4.1 常用函数1
- val( )函数
无参调用 $(选择器).val( ) -----读取数组中第一个dom对象的value属性值
有参调用 $(选择器).val(值) —给数组中所有dom对象的value属性统一赋值 - text( )函数
无参调用 $(选择器).text( ) -----读取数组中所有dom对象的文字显示内容(即标签内部的文字)，将得到的内容拼接为一个字符串并返回
有参调用 $(选择器).text(值) —给数组中所有dom对象的文字显示内容统一赋值 - arrt( )函数
$(选择器).attr(“属性名”) -----读取数组中第一个dom对象的属性值
$(选择器).attr(“属性名”,“值”) —给数组中所有dom对象的属性统一赋值
例：$(“img”).attr(“src”,“img/ex2.jpg”);
4.2 常用函数2
- remove( )函数
$(选择器).remove() -----将数组中所有dom对象及其子对象都删除
- empty( )函数
$(选择器).empty() -----将数组中所有dom对象的子对象都删除
- append( )函数
$(选择器).append(“HTML”) -----为数组中所有dom对象添加dom对象
例：$(选择器).append(“我动态添加的div”)
- html( )函数 （相当于js中的innerHTML）
$(选择器).html( ) -----无参调用，获取dom数组第一个元素的内容
$(选择器).html(值) -----有参调用，设置dom数组所有元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数相关</title>
<style type="text/css">
div {
background: yellow;
}
</style>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function () {
$("#btn1").click(function () {
//使用remove删除dom数组中所有父和子对象
$("select").remove();
})
$("#btn2").click(function () {
//使用empty删除dom数组中所有子对象
$("select").empty();
})
$("#btn3").click(function () {
//使用append给dom数组中所有对象添加dom对象
//$("#father").append("<input type='button' value='我是增加的按钮' />");
$("#father").append("<table border='1'><tr><td>第一列</td><td>第二列</td></tr></table>");
})
$("#btn4").click(function () {
//使用html获取dom对象的innerHTML值
alert($("span").html());//我是mysql <b>数据库</b>
alert($("span").text());//我是mysql 数据库我是jdbc
})
$("#btn5").click(function () {
//使用html设置数组中所有dom对象的innerHTML值
$("span").html("我是新的<b>数据<b>");
})
})
</script>
</head>
<body>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br />
<select>
<option value="亚洲">亚洲</option>
<option value="欧洲">欧洲</option>
<option value="美洲">美洲</option>
</select>
<br />
<div id="father">我是第一个div</div>
<br />
<span>我是mysql <b>数据库</b></span>
<span>我是jdbc</span>
<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="使用html获取第一个dom对象的innerHTML值" id="btn4" /><br />
<input type="button" value="使用html设置所有dom对象的innerHTML值" id="btn5" /><br />
</body>
</html>
- each函数
each可以对数组，json，dom数组循环处理。数组， json中的每个成员都会调用一次处理函数。
var arr = [ 1, 2, 3] //数组
var json = {“name”:“lisi”,“age”:20 }
var obj = $(“:text”);语法1：$ . each( 要遍历的对象，function( index，element ){ 处理程序 })
- $相当于java中的一个类名，each相当于类中的静态方法
语法2：jQuery对象 . each( function( index，element ){ 处理程序 })
index：数组的下标， element：数组的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数相关</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function () {
$("#btn1").click(function () {
//循环普通数组
var arr = [1, 2, 3];//数组用中括号!!!
$.each(arr, function (i, element) {
alert("循环变量:" + i + "---数组成员:" + element);
})
})
$("#btn2").click(function () {
//循环json
var json = { "name": "张三", "age": 20 };
$.each(json, function (i, element) {
alert("key:" + i + "---值:" + element);
})
})
$("#btn3").click(function () {
//循环dom数组
$.each($(":text"), function (i, element) {
alert("循环变量:" + i + "---dom的value值:" + element.value);
})
})
$("#btn4").click(function () {
//循环dom数组
$(":text").each(function (i, element) {
alert("循环变量:" + i + "---dom的value值:" + element.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="七里香" /><br />
<input type="text" value="一路向北" /><br />
<input type="text" value="借口" /><br />
<input type="button" value="each循环普通数组" id="btn1" /><br />
<input type="button" value="each循环json" id="btn2" /><br />
<input type="button" value="each循环dom数组" id="btn3" /><br />
<input type="button" value="第二种语法循环dom数组" id="btn4" /><br />
</html>
5. 事件
5.1 定义元素监听事件
语法格式：$(选择器).事件名称( 事件的处理函数)
- $(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
- 事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),jquery中的事件名称，就是click，都是小写的。
- 事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
5.2 on事件绑定
语法格式：$( 选择器 ) . on( 事件名称，事件的处理函数 )
- 事件名称加引号!!!
例如：$(“#btn”) . on(“click”，function(){ 处理按钮 })- 使用on的优点：可以一次性绑定多个事件 $(“#btn”) . on({ },{ },{ });
很多时候元素是动态生成的，如果在这些元素生成之后没有重新获取一次元素再绑定事件，那么新生成的元素就不会有绑定的事件，而on方法可以直接给这些元素动态绑定事件，不需要每次生成都再去获取一次元素
示例1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数相关</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function () {
$("#btn1").click(function () {
//使用append增加dom对象
$("#mydiv").append("<input type='button' value='我是新加入的button' id='newBtn' />");
//使用on给按钮绑定事件
//事件名称加引号!!!
$("#newBtn").on("click", function () {
alert("新建的按钮被单击了");
})
})
})
</script>
</head>
<body>
<div id="mydiv">
我是一个div,需要增加一个button
</div>
<input type="button" value="创建一个button,绑定一个click" id="btn1" />
</html>
示例2 on绑定事件的优点
这一块不是很明白，等用到的时候再深究一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数相关</title>
<!-- 指定jQuery的库文件的位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
// $(document).ready( 函数 ) 当页面中的dom对象加载完成后，才能给dom对象绑定事件
//相当于onLoad
$(function () {
// $('li').click(function() {
// console.log($(this).index());
// })
// $('ul').append($('<li >3</li>'))
// // 动态插入后点击打印不了<li >3</li>下标
// console.log("-----------分界线-----------");
//使用on方法就可以
$('ul').on('click', 'li', function() {
console.log($(this).index());
})
$('ul').append($('<li >4</li>'))
$('ul').append($('<li >5</li>'))
$('ul').append($('<li >6</li>'))
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</html>
6. Ajax
6.1 相关函数
使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax，有4个步骤。jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
- $.ajax() : jquery中实现ajax的核心函数。
$.post() : 使用post方式做ajax请求。
$.get() : 使用get方式发送ajax请求。
$.post()和$.get()，他们在内部都是调用的$.ajax()介绍
$.ajax函数的使用： 函数的参数表示请求的url， 请求的方式，参数值等信息。
- $.ajax()参数是一个json的结构。
json结构的参数说明：- async：是一个boolean类型的值，默认是true，表示异步请求。可以不写async这个配置项
与xmlHttp.open(get,url,true)，第三个参数一样的意思。 - contentType：一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。例如你想表示请求的参数是json格式的， 可以写application/json
- data：可以是字符串，数组，json，表示请求的参数和参数值。常用的是json格式的数据
- dataType：表示期望从服务器端返回的数据格式，可选的有：xml，html，text，json。当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以返回你需要的数据格式。
- error：一个function ，表示当请求发生错误时，执行的函数。
error：function() { 发生错误时执行 } - sucess：一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数之前使用XMLHttpRequest对象， 当readyState4 && status200的时候。
- url：请求的地址
- type：请求方式，get或者post， 不用区分大小写。 默认是get方式。
主要使用的是url，data，dataType，success
- async：是一个boolean类型的值，默认是true，表示异步请求。可以不写async这个配置项
- $.get( )
使用http get请求
语法：$ . post(URL，data，function(resp)，dataType)
- $.post( )
使用http post请求
同$.get( )
例子：以$ . ajax( )为例
$.ajax({
async: true,
contentType: "application/json",
data: { name: "lisi", age: 20 },
dataType: "json",
error: function () {
//请求出现错误时，执行的函数
},
success: function (data) {
// data 就是responseText, 是jquery处理后的数据。
},
url: "bmiAjax",
type: "get"
})
案例（使用ajax学习笔记里最后一个案例，将jsp文件做如下修改）：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>query使用ajax</title>
<script src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
//-------------------------主要修改的部分------------------------------------
$(function () {
$("#btn").click(function () {
//获取dom的value值
var proid = $("#proid").val();
//发起ajax请求
$.ajax({
url: "queryJson",
data: {
"proid": proid
},
data_type: "json",
success: function (resp) {
$("#proname").val(resp.name);
$("#projiancheng").val(resp.jiancheng);
$("#proshenghui").val(resp.shenghui);
}
})
})
})
//-----------------------主要修改的部分--------------------------------------
</script>
</head>
<body>
<p>ajax根据省份id获取名称</p>
<table border="1px">
<tr>
<td>省份编号:</td>
<td>
<input type="text" id="proid"/>
<input type="button" value="搜索" id="btn">
</td>
</tr>
<tr>
<td>省份名称:</td>
<td>
<input type="text" id="proname"/>
</td>
</tr>
<tr>
<td>简称:</td>
<td>
<input type="text" id="projiancheng"/>
</td>
</tr>
<tr>
<td>省会:</td>
<td>
<input type="text" id="proshenghui"/>
</td>
</tr>
</table>
</body>
</html>
7 案例：级联查询
本案例使用的数据库为ajax学习笔记中案例的数据库，一共两张表province和city
7.1 项目文件目录结构图
7.2 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市级联查询</title>
<script src="js/jquery-3.6.1.js"></script>
<script type="text/javascript">
//document全部加载完后执行
$(function () {
//按钮绑定鼠标单击事件
$("#btnLoad").click(function () {
$.get({
url: "queryProvince",
data_type: "json",
success: function (resp) {
//alert(resp);//是json对象组成的数组
//alert(resp[0].name); //河北
// for (var i=0;i<resp.length;i++){
// var html="<option value=\""+resp[i].id+"\">"+resp[i].name+"</option>";
// //alert(html);
// $("#province").append(html);
// }
//循环json对象的数组
$.each(resp, function (i, element) {
$("#province").append("<option value=\"" + element.id + "\">" + element.name + "</option>");
})
//load一次后，设置按钮不可用
$("#btnLoad").attr("disabled", "disabled");
}
})
})
$("#province").on("change", function () {
//alert($("#province>option:selected").val());
//先清空city下拉框原来存在的option
$("#city").empty();
var $selectedProvince = $("#province>option:selected");
$.get({
url: "queryCity",
data: {
"proid": $selectedProvince.val()
},
data_type: "json",
success: function (resp) {
//重新加一个请选择的选项，防止默认选择第一个城市
$("#city").append("<option value=\"0\">请选择</option>");
$.each(resp, function (i, element) {
$("#city").append("<option value=\"" + element.id + "\">" + element.name + "</option>");
})
}
})
})
})
</script>
</head>
<body>
<p>省市级联查询</p>
<div>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>省份名称</td>
<td>
<select id="province">
<option value="0">请选择</option>
</select>
</td>
<td>
<input type="button" value="load数据" id="btnLoad"/>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city">
<option value="0">请选择</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
7.3 controller层
QueryProvinceServlet.java
package com.study.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.study.dao.QueryDao;
import com.study.entity.Province;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Queue;
public class QueryProvinceServlet extends javax.servlet.http.HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//查询数据库
QueryDao dao=new QueryDao();
List<Province> provinceList=dao.queryProvinceList();
String strJson="{}";
if (provinceList!=null){
//调用jackson工具库,将List对象转为json格式的字符串
ObjectMapper om=new ObjectMapper();
strJson=om.writeValueAsString(provinceList);
}
//设置json格式输出给ajax请求
resp.setContentType("text/json;charset=utf-8");
PrintWriter pw=resp.getWriter();
pw.write(strJson);
pw.flush();
pw.close();
}
}
QueryCityServlet.java
package com.study.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.study.dao.QueryDao;
import com.study.entity.City;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class QueryCityServlet extends javax.servlet.http.HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取参数
String proid=req.getParameter("proid");
String json="{}";
//查询数据库
QueryDao dao=new QueryDao();
List<City> cityList=dao.queryCityByProvinceId(Integer.parseInt(proid));
if(cityList!=null){
//转换为json格式的字符串
ObjectMapper om=new ObjectMapper();
json=om.writeValueAsString(cityList);
}
resp.setContentType("text/json;charset=utf-8");
PrintWriter pw=resp.getWriter();
pw.write(json);
pw.flush();
pw.close();
}
}
7.4 dao层
QueryDao.java
package com.study.dao;
import com.study.entity.City;
import com.study.entity.Province;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class QueryDao {
private Connection conn;
private PreparedStatement pst;
private ResultSet rs;
private String sql;
//数据库连接
private String url = "jdbc:mysql://localhost:3306/ajax_1";
private String username = "root";
private String password = "12345";
//查询所有省份信息
public List<Province> queryProvinceList() {
List<Province> provinceList = 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";
pst = conn.prepareStatement(sql);
rs = pst.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"));
provinceList.add(p);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (conn != null) {
conn.close();
}
if (rs != null) {
rs.close();
}
if (pst != null) {
pst.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
return provinceList;
}
//根据provinceId查询所有city
public List<City> queryCityByProvinceId(Integer proid){
List<City> cityList = new ArrayList<>();
try {
City c = null;
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(url, username, password);
sql = "select id,name,provinceid from city where provinceid = ?";
pst = conn.prepareStatement(sql);
pst.setInt(1,proid);
rs = pst.executeQuery();
while (rs.next()) {
c=new City();
c.setId(rs.getInt("id"));
c.setName(rs.getString("name"));
c.setProvinceId(rs.getInt("provinceid"));
cityList.add(c);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (conn != null) {
conn.close();
}
if (rs != null) {
rs.close();
}
if (pst != null) {
pst.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
return cityList;
}
}
7.5 entity层
Province.java
package com.study.entity;
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
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;
}
@Override
public String toString() {
return "Province{" +
"id=" + id +
", name='" + name + '\'' +
", jiancheng='" + jiancheng + '\'' +
", shenghui='" + shenghui + '\'' +
'}';
}
}
City.java
package com.study.entity;
public class City {
private Integer id;
private String name;
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;
}
@Override
public String toString() {
return "City{" +
"id=" + id +
", name='" + name + '\'' +
", provinceId=" + provinceId +
'}';
}
}
7.6 web.xml
<?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>QueryProvinceServlet</servlet-name>
<servlet-class>com.study.controller.QueryProvinceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryProvinceServlet</servlet-name>
<url-pattern>/queryProvince</url-pattern>
</servlet-mapping>
<!--根据省份id查询所有城市-->
<servlet>
<servlet-name>QueryCityServlet</servlet-name>
<servlet-class>com.study.controller.QueryCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryCityServlet</servlet-name>
<url-pattern>/queryCity</url-pattern>
</servlet-mapping>
</web-app>
扫一扫
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
