本文详细介绍了jQuery的基础知识，包括jQuery的概念、思维导图、语法、选择器、过滤器、函数的使用，特别是`each()`函数和事件处理。此外，还探讨了jQuery的Ajax功能，如`.get()`和`.post()`方法，以及如何优化级联项目。通过实例代码，帮助读者掌握jQuery的核心功能。
jQuery
jQuery的概念
- jQuery是什么？
- jQuery是js库
- 在库中封装了很多方法可供开发人员调用
- dom对象和jquery对象
- dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
- var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象。
- jquery对象是什么？
- 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
- jquery对象是由n个dom对象组成的一个数组对象。
- 例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。也就是jquery对象。 它是一个数组。现在数组中就一个值。因为使用的是id选择器，id在dom中是唯一的。
jQuery的思维导图
jQuery的语法
-
dom对象可以和jquery对象相互的转换。
-
dom对象可以转为jquery ， 语法： $(dom对象)
-
<html> <head> <meta charset="utf-8"> <title>dom对象转为jQuery对象</title> <!--引入jquery库，可到官网下载js文件--> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // dom对象转为jQuery对象 function toJquery(){ var btn = document.getElementById("btn"); alert("dom:" + btn.value); var $btn = $(btn); alert("jquery:" + $btn.val()); } // jQuery转为dom对象 注意jquery是一个数组 function toDom(){ var $btn = $("#btn1"); // var btn = $btn[0]; var btn = $btn.get(0); // 第二种方式 alert(btn.value); } </script> </head> <body> <input type="button" value="dom转为jquery" id="btn" onclick="toJquery()" /> <input type="button" value="jquery转为dom" id="btn1" onclick="toDom()" /></body> </html>
-
-
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
-
<html> <head> <title>jQuery转为dom</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> function sum(){ var $text = $("#text"); // 获取jquery对象 var text = $text.get(0); // 把jquery对象转为dom对象 var num = text.value; // 调用dom的属性value text.value = num * num; // 进行平方输出 } </script> </head> <body> <input type="button" value="计算平方" onclick="sum()" /> <input type="text" id="text" /> </body> </html>
-
-
无论从数组中获取哪一个数组，下标是什么，获取的也都会是dom对象，因为jquery就是数组，数组中存放的就是dom对象。
-
-
为什么要进行dom和jquery的转换
- 目的是要使用对象的方法，或者方法。
- 当你是dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
选择器
-
什么是选择器？
- 就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
- 可分为基本选择器和表单选择器
-
基本选择器（常用选择器）
-
id选择器， 语法： $(“#dom对象的id值”)
- 通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
-
class选择器， 语法： $(".class样式名)
- class表示css中的样式， 使用样式的名称定位dom对象的。
-
标签选择器， 语法： $(“标签名称”)
- 使用标签名称定位dom对象的
-
代码：
-
<html> <head> <meta charset="utf-8"> <title>选择器的使用</title> <style type="text/css"> div{ background: gray; width: 200px; height: 200px; } </style> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> /* 语法： id选择器：$("#id") 类选择器：$(".class名") 标签选择器：$("标签名") */ // ID选择器 function show1(){ var div = $("#div1"); // 获取jquery对象 div.css("background", "blue"); // 使用jquery的方法进行设置背景颜色 } // 类选择器 function show2(){ var div = $(".div2"); div.css("background", "red"); } // 标签选择器 function show3(){ var div = $("div"); div.css("background", "black"); } // 所有选择器-->整个页面变粉色 function show4(){ var div = $("*"); div.css("background", "pink"); } // 混合选择器 --> 使用","隔开 function show5(){ var div = $(".div2, span"); div.css("background", "orange"); } </script> </head> <body> <div id="div1"></div> <br /> <div class="div2"></div> <br /> <div></div> <br /> <span id="span1">span标签</span> <br /> <input type="button" value="id选择器" onclick="show1()"/><br /> <input type="button" value="class选择器" onclick="show2()"/><br /> <input type="button" value="标签选择器" onclick="show3()"/><br /> <input type="button" value="所有选择器" onclick="show4()"/><br /> <input type="button" value="混合选择器" onclick="show5()"/><br /> </body> </html>
-
-
-
表单选择器
-
使用标签的type属性值，定位dom对象的方式。
-
语法： $(“:type属性值”)
-
例如： (":text"),选择的是所有的单行文本框，(":text") ,选择的是所有的单行文本框，(":text"),选择的是所有的单行文本框，(“:button”) ,选择的是所有的按钮。
-
代码：
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单选择器的使用</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> /* 语法： $(":type属性值") 作用：主要是处理表单的 注意：不是只能处理表单，当没有表单的时候也可以使用此方法。 */ function fun1(){ var s = $(":text"); alert(s.val()); } function fun2(){ var s = $(":button"); alert(s.val()); } function fun3(){ var s = $(":checkbox"); for (var i = 0; i < s.length; i++) { var f = s[i]; // 把jQuery转为dom对象 alert(f.value); } } function fun4(){ var s = $(":radio"); for (var i = 0; i < s.length; i++) { var f = s[i]; alert(f.value); } } </script> </head> <body> 文本框(text):<input type="text" /><br /> <input type="button" value="按钮(button)" /><br /> 爱好： <input type="checkbox" value="smoke" name="aihao"/>抽烟 <input type="checkbox" value="drink" name="aihao"/>喝酒 <input type="checkbox" value="fire" name="aihao"/>烫头<br /> 性别： <input type="radio" value="man" name="sex"/>男 <input type="radio" value="women" name="sex" />女<br /> <p>功能</p> <input type="button" value="获取文本框value" onclick="fun1()" /><br> <input type="button" value="获取按钮value" onclick="fun2()" /><br> <input type="button" value="获取多选框value" onclick="fun3()" /><br> <input type="button" value="获取单选框value" onclick="fun4()" /><br> </body> </html>
-
-
过滤器
-
什么是过滤器
- 在定位了dom对象后，根据一些条件筛选dom对象。
- 过滤器也是一个字符串，用来筛选dom对象的。
- 过滤器不能单独使用， 必须和选择器一起使用。
-
基本过滤器
-
$(“选择器:first”) : 第一个dom对象
-
$(“选择器:last”): 数组中的最后一个dom对象
-
$(“选择器:eq(数组的下标)”) ：获取指定下标的dom对象
-
$(“选择器:lt(下标)”) ： 获取小于下标的所有dom对象
-
$(“选择器:gt(下标)”) ： 获取大于下标的所有dom对象
-
代码：
-
<html> <head> <title>过滤器的使用</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> /* 语法： $("选择器:条件") 作用：过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。 */ // 当页面加载完成时执行函数function(){} 等同于$(document).ready(function(){}) 也就是js中的onload事件 $(function(){ /* $(选择器).click(function(){}); 解释： $(选择器)：把dom对象转为jquery对象 .click：是jquery函数，也是一个事件，点击事件，等用于js中的onclick句柄 function(){}：发生点击事件时执行该函数 js语法： document.getElementById("id").onclick = function(){} */ $("#btn1").click(function(){ var obj = $("div:first"); obj.css("background", "red"); }); $("#btn2").click(function(){ var obj = $("div:last"); obj.css("background", "pink"); }); $("#btn3").click(function(){ var obj = $("div:eq(3)"); obj.css("background", "black"); }); $("#btn4").click(function(){ var obj = $("div:lt(3)"); obj.css("background", "blue"); }); $("#btn5").click(function(){ var obj = $("div:gt(3)"); obj.css("background", "yellow"); }); }) </script> <style type="text/css"> div{ background:gray; } </style> </head> <body> <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> </body> </html>
-
-
-
表单过滤器
-
语法：
-
$(“:type属性值:过滤语句”)
-
例：
- $(“:text:enabled”)：选择可用的文本框
- $(“:text:disabled”)：选择不可用的文本框
- $(“:checkbox:checked”)：复选框中选中的元素
- $(“#id>option:selected”)：选择指定下拉列表被选中元素
-
代码：
-
<html> <head> <meta charset="ANSI"> <title>表单过滤器Filter的使用</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // 当页面的dom节点加载完毕时执行 $(function(){ // 绑定点击事件->把可用文本框的值设为hello $("#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++){ var c = obj[i]; alert(c.value); } }); // 绑定点击事件->显示下拉列表选中的值 $("#btn3").click(function(){ /* $("#lang>option:selected") 解释： $("#id>option:selected") 选择指定下拉列表被选中元素 ">"：右边是左边的儿子 "selected"：表示提取被选中的 注意：右边和左边都是选择器 可以用标签选择器也可以用id、类选择器 */ var obj = $("#lang>.k:selected"); // 这里使用的是id、类选择器 alert(obj.val()); }); }); </script> </head> <body> <p>文本框</p> <input type="text" value="text1" id="text1" /><br> <input type="text" value="text2" id="text2" disabled="true" /><br> <input type="text" value="text3" id="text3" /><br> <input type="text" value="text4" id="text4" disabled /><br> <p>复选框</p> <input type="checkbox" value="smoke" />抽烟<br> <input type="checkbox" value="drink" checked />喝酒<br> <input type="checkbox" value="fire" checked />烫头<br> <br> <p>下拉框</p> <select id="lang"> <option value="java" class="k">java语言</option> <option value="go" class="k" selected >go语言</option> <option value="sql"class="k" >sql语言</option> </select> <p>功能按钮</p> <input id="btn1" type="button" value="所有可用的text设置值为hello" /><br> <button id="btn2">显示被选中的复选框的值</button><br> <button id="btn3">显示下拉列表选中的值</button><br> </body> </html>
-
-
-
函数
-
第一组函数（常用函数）
-
val()
- 操作数组中 DOM 对象的 value 属性.
- $(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
- $(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
-
text()
- 操作数组中所有 DOM 对象的【文字显示内容属性】
- $(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
- $(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
-
attr()
- 对 val, text 之外的其他属性操作
- $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
- $(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
-
代码：
-
<!DOCTYPE html> <html> <head> <title>函数的使用</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // 当页面所有dom节点加载完毕时执行function函数 $(function(){ // 获取第一个文本框的值 $("#btn1").click(function(){ alert($(":text:first").val()); // alert($(":text").val()); }); // 设置所有文本为新值 $("#btn2").click(function(){ $(":text").val("新值"); }); // 获取div的所有文本 $("#btn3").click(function(){ alert($("div").text()); }); // 获取第一个div的文本 $("#btn4").click(function(){ alert($("div:first").text()); }); // 设置所有div新文本 $("#btn5").click(function(){ $("div").text("div新文本"); }); // 设置img图片 $("#btn6").click(function(){ $("#img1").attr("src", "img/ex3.jpg"); $("#img2").attr("src", "img/ex4.jpg"); }); // 获取img1的src属性值 $("#btn7").click(function(){ alert($("#img1").attr("src")); }); }); </script> <style type="text/css"> div{ background:pink; } </style> </head> <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="img2" src="img/ex2.jpg" /><br> <p>功能按钮</p> <input id="btn1" type="button" value="获取第一个文本框的值" /><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> <button id="btn7">获取img1的src属性值</button><br> </body> </html>
-
-
-
第二组函数
-
hide()：
- $(选择器).hide() :将数组中所有 DOM 对象隐藏起来
-
show()：
- $(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
-
remove()：
- $(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
-
empty()：
- $(选择器).empty()：将数组中所有 DOM 对象的子对象删除
-
html()：
- 设置或返回被选元素的内容（innerHTML）。
- $(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
- $(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
-
append()：
- 为数组中所有 DOM 对象添加子对象
- $(选择器).append(“我动态添加的 div”)
-
each()：
- each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
- 语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
- 语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
- index: 数组的下标、element: 数组的对象
-
代码：
-
<!DOCTYPE html> <html> <head> <title>函数的使用2</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // 页面dom对象全部加载完毕时调用function $(function(){ // 隐藏所有div $("#btn1").click(function(){ $("div").hide(); }); // 显示所有div $("#btn2").click(function(){ $("div").show(); }); // 清除所有下拉列表中的option子标签 $("#btn3").click(function(){ $("select").empty(); }); // 删除所有下拉列表 $("#btn4").click(function(){ $("select").remove(); }); // 添加元素 $("#btn5").click(function(){ $("select").append("<option>动态添加的option</option>"); }); // 获取第一个span的文本内容 $("#btn6").click(function(){ alert($("span").html()); // mysql是一个<b>数据库</b> //alert($("span:first").text()); // mysql是一个数据库 }); // 设置span的内容 $("#btn7").click(function(){ $("span").html("动态设置span内容"); }); // each循环 $("#btn8").click(function(){ $("select").each(function(index, element){ alert("选中的索引：" + index + ",值：" + element.value); }); }); }); </script> <style type="text/css"> div{ background:pink; } </style> </head> <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> </html>
-
-
each函数的使用
-
each()：
- each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
- 语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
- 语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
- index: 数组的下标
- element: 数组的对象
-
代码：
-
<html> <head> <title>each的用法</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // 页面dom对象全部加载完毕时调用function $(function(){ // 遍历数组 $("#btn1").click(function(){ var arr = ["a", "b", "c"]; $(arr).each(function(index, element){ alert("数组下标=" + index + ",元素=" + element); }); }); // 遍历json数据 $("#btn2").click(function(){ var jarr = {name:"smith", age:18}; $.each(jarr, function(k,v){ alert("key=" + k + ",value=" + v) }); }); // 遍历dom数组 $("#btn3").click(function(){ $.each($(":text"), function(index, element){ alert("index=" + index + ",element=" + element.value); }); }); }); </script> <style type="text/css"> div{ background:pink; } </style> </head> <body> <p>文本框val</p> <input type="text" value="苹果" /><br> <input type="text" value="荔枝" /><br> <input type="text" value="西瓜" /><br> <p>功能按钮</p> <button id="btn1">遍历数组</button><br> <button id="btn2">遍历json对象</button><br> <button id="btn3">遍历dom数组</button><br> </body> </html>
-
事件处理
-
有两种语法：
-
$(选择器).监听事件名称(处理函数)
-
监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
-
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1 $("button").click(fun1) 为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2 $("tr").mouseover(fun2)
-
-
$(选择器).on(event,data,function)
-
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
-
例如：
-
语法：$(选择器).on(event,data,function) event：事件一个或者多个，多个之间空格分开 data：可选。规定传递到函数的额外数据，json 格式 function: 可选。规定当事件发生时运行的函数。
-
-
-
代码：
-
<html> <head> <title>事件处理的方式</title> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> // 页面dom节点全部加载完毕时执行function $(function(){ $("#btn").on("click", function(){ $("#mydiv").append("<button id='newbutton'>我是动态添加的按钮</button"); }); $("#newbutton").on("click", function(){ alert("动态添加的button被点击了"); }); //可以传数据 $("p").on("click", {name:"smith"}, function(event){ // alert.data:获取传入的参数，event是自定义名称 alert(event.data.name); }); }); </script> <style type="text/css"> div{ background:pink; width:100px; height:100px; } </style> </head> <body> <button id="btn">动态添加按钮</button> <br><br> <div id="mydiv"></div> <p>可以点击我</p> </body> </html>
-
-
jquery-ajax
- ajax
- jquery提供了多个关于ajax的方法，方便于我们接收服务器端的文本、xml、json等数据并更新到dom对象上。
- 方法：
- $.ajax()：是jquery中ajax请求的核心方法
- 语法：$.ajax({name:value,name:value})
- name可以是？
- async：布尔值，默认true，为异步请求
- contentType：发送到服务器所使用的内容类型
- data：发送到服务器的数据，可以是数组，字符串，多数是json
- datatype：期望从服务器获取的数据类型，一般为json
- error：请求失败要运行的函数
- success：请求成功要执行的函数
- type：请求类型（默认为get）
- url：发送请求的url
- $.get()
- $.get() 方法使用 HTTP GET 请求从服务器加载数据
- 语法：$.get(url,data,function(data),dataType)
- 注意：参数是固定的，按顺序来
- url 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。一般是json数据
- function(data)可选。当请求成功时运行的函数。data是自定义形参名。
- data - 包含来自请求的结果数据
- dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。
- 可能是json，也可能是字符串等
- $.post()
- $.post() 方法使用 HTTP POST 请求从服务器加载数据。
- 语法：$.post(URL,data,function(data),dataType)
- 参数跟$.get()一样
- $.ajax()：是jquery中ajax请求的核心方法
- 使用jquery-ajax对省份和城市级联项目进行优化（可以参考ajax学习总结文章）
- 代码
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>jQuery-ajax</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
// 加载所有省份
function loadProvince(){
// 每一次加载都得清空下拉列表，否则会导致数据的重复
$("#province").empty();
$("#city").empty();
$("#province").append("<option value='0'>请选择省份...</option>");
// 通过ajax向服务器发送异步请求
$.ajax({async:true, dataType:"json", type:"get", url:"province/search", success:function(resp){
// 遍历resp数组
$.each(resp, function(i,n){ // 使用jquery函数each遍历数组 i为索引，n为json对象
$("#province").append("<option value='"+n.id+"'>"+n.name+"</option>");
});
}});
}
// 页面的dom节点加载完毕时执行
$(function(){
// 页面加载完成自动调用--更新省份
loadProvince();
// 更新省份
$("#btn").on("click", function(){
loadProvince();
});
// 绑定下拉列表选项被选中事件
$("#province").on("change", function(){
// 每一次选中都需要清空当前选中项的子对象
$("#city").empty();
// 拿到选中的省份option的value值，也就是省份id
var provinceid = $("#province>option:selected").val();
// 通过省份id来查找city
/*$.ajax({async: true, dataType: "json", type: "get", url: "city/search", data:{provinceid:provinceid},
success:function(resp){
// 遍历json数组--[{"id":"12","name":"太原","provinceid":"2"},{"id":"13","name":"大同","provinceid":"2"}]
$.each(resp, function(i, n){
$("#city").append("<option>"+n.name+"</option>"); //添加选项
});
}});*/
// 使用jquery的$.post()来实现--参数是固定的，不需要用json格式，简洁许多
$.post("city/search", {provinceid:provinceid}, callback, "json");
});
});
// 定义一个回调函数来处理返回数据
function callback(resp){
$.each(resp, function(i, n){
$("#city").append("<option>"+n.name+"</option>");
});
}
</script>
</head>
<body>
<h2>级别联查</h2>
<table border="1px">
<tr>
<td>省份:</td>
<td>
<select id="province">
</select>
<input type="button" value="查询" id="btn" />
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select id="city">
</select>
</td>
</tr>
</table>
</body>
</html>
@WebServlet({"/province/search", "/city/search"})
public class SearchServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String servletPath = request.getServletPath();
if ("/province/search".equals(servletPath)){
doProvince(request, response);
} else if("/city/search".equals(servletPath)){
doCity(request, response);
}
}
/**
* 查询省份对应的所有城市
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void doCity(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
request.setCharacterEncoding("utf-8");
String provinceId = request.getParameter("provinceid");
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
// 定义一个城市集合
List<City> citys = new ArrayList<>();
// 定义一个标志位，来表示是否查询到数据
boolean flag = false;
// 获取参数不为空则执行数据库操作
if (provinceId != null && !provinceId.trim().equals("")){
try {
conn = DBUtil.getConnection();
String sql = "select id,name,provinceid from city where provinceid = ?";
ps = conn.prepareStatement(sql);
ps.setString(1, provinceId);
rs = ps.executeQuery();
while (rs.next()){
// 将城市信息添加到集合中
citys.add(new City(rs.getString("id"), rs.getString("name"), rs.getString("provinceid")));
flag = true;
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally{
DBUtil.close(conn, ps, rs);
}
}
// 查询到数据则把数据转为json字符串返回到客户端浏览器
if (flag){
response.setContentType("application/json;charset=utf-8");
ObjectMapper om = new ObjectMapper();
String s = om.writeValueAsString(citys);
System.out.println(s);
PrintWriter out = response.getWriter();
out.write(s);
out.flush();
}
}
/**
* 查询所有省份
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void doProvince(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
// 新建一个集合，拿来存储省份
List<Province> pros = new ArrayList<>();
boolean flag = false;
try {
conn = DBUtil.getConnection();
String sql = "select id,name,jiancheng,shenghui from province";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()){
// 把省份对象添加到集合里
pros.add(new Province(rs.getString("id"), rs.getString("name"),
rs.getString("jiancheng"), rs.getString("shenghui")
));
flag = true; // 把标志位设置为true
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally{
DBUtil.close(conn, ps, rs);
}
// 取到数据了返回到客户端浏览器
if (flag) {
response.setContentType("application/json;charset=utf-8");
ObjectMapper om = new ObjectMapper();
String s = om.writeValueAsString(pros);
PrintWriter out = response.getWriter();
out.write(s);
out.flush();
}
}
}
jquery学习总结。
扫一扫
2417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
