jQuery入门

最新推荐文章于 2022-07-28 09:03:00 发布

高开低走。

最新推荐文章于 2022-07-28 09:03:00 发布

阅读量232

点赞数

分类专栏：锦到说jQuery 文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/qq_43568982/article/details/120172176

版权

锦到说jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始时间：2021-09-07
jQuery

jQuery是js库，
库:相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的用js代码写的function

来看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
//这里需要另起一个script才行
<script type="text/javascript">
    /*
    $(document)
    1.$( document) ,$是jQuery中的函数名称, document是函数的参数,作用是 document对象变成jQuery函数库可以使用的对象。
    2. ready:是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后会执行ready函数的内容。 ready相当于js中的onLoad事件
    3. function()自定义的表示onLoad后要执行的功能。
     */
    $(document).ready(function () {
        alert("This is jQuery");
    })
        $(function (){
        alert("这是简写方式")
    })
</script>
<body>

</body>
</html>

    $(document)
    1.$( document) ,$是jQuery中的函数名称, document是函数的参数,作用是 document对象变成jQuery函数库可以使用的对象。
    2. ready:是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后会执行ready函数的内容。 ready相当于js中的onLoad事件
    3. function()自定义的表示onLoad后要执行的功能。

要使用jQuery，得先引入jQuery文件
在这里插入图片描述

jQuery对象和DOM对象

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    function btnClick() {
        var obj = document.getElementById("btn");
        alert("使用dom对象的属性:" + obj.value);
        //dom转为jQuery
        var $jobj = $(obj);
        //必须要用jQuery库，不然用不了其属性
        alert("使用jQuery对象的属性:" + $jobj.val())
    }
</script>
<body>
<input type="button" value="按钮" id="btn" onclick="btnClick()">
</body>
</html>

#id的使用参考博客

jQuery转DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript " src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    function btnClick() {
        //使用jQuery获取对象
        //#是id选择器
        //得到的都是一个数组，通过下标来获取对象
        var obj = $("#txt")[0];
        //var obj=$("#txt").get(0);两者等价
        alert("使用DOM对象的属性:" + obj.value)
        var num = obj.value;
        obj.value = num * num;
    }
</script>
<body>
<input type="button" value="计算平方" id="btn" onclick="btnClick()"/><br/>
<input type="text" value="整数" id="txt"/>
</body>
</html>

选择器

选择器:就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom常用的选择器:

基本选择器的使用

选择器类型	语法
id选择器	$(’#dom对象的id值")
class选择器	$(“class样式名”)
标签选择器	$(“标签名称”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    div {
        background: black;
        width: 100px;
        height: 200px;
    }
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    function fun1() {
        var obj = $("#one");
        obj.css("background", "green");
    }

    function fun2() {
        var obj = $(".two");
        obj.css("background", "green");
    }

    function fun3() {
        //标签选择器
        var obj = $("div");
        obj.css("background", "green");
    }

    function fun4() {
        //选择全部
        var obj = $("*");
        obj.css("background", "green");
    }
    function fun5() {
        //组合选择器
        var obj = $("#one,span");
        obj.css("background", "green");
    }
</script>
<body>
<div id="one">
    <input type="button" value="变颜色" onclick="fun1()"/>
</div>
<div class="two">
    <input type="button" value="变颜色" onclick="fun2()"/>
</div>
<div><input type="button" value="变颜色" onclick="fun3()"/></div>
<span class="two">span标签<input type="button" value="变颜色" onclick="fun4()"/></span>
<span class="two">span标签<input type="button" value="变颜色" onclick="fun5()"/></span>
</body>
</html>

表格选择器

和有没有form没关系
语法：

$(":type属性值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    function fun1() {
        var obj = $(":text");
        alert(obj.val());
    }

    function fun2() {
        var obj = $(":radio");
        for (var i = 0; i < obj.length; i++) {
            //此时这样写是不对的，因为遍历jQuery对象时，每一个子对象就是一个DOM了
            //alert(obj[i].val());
            var dom = obj[i];
            alert(dom.value)
        }
    }

</script>
<body>
<input type="text" value="type=text" onclick="fun1()"/><br/>
<input type="radio" value="man"/>男<br/>
<input type="radio" value="woman"/>女<br/>
<input type="button" value="开关" onclick="fun2()"/><br/>
</body>
</html>

过滤器

比较一下Servlet那边的过滤器

基本过滤器

过滤器格式	功能
$(“选择器:first”)	选择第一个DOM对象
$(“选择器:last”)	选择最后一个DOM对象
$(“选择器:eq(数组下标)”)	获取指定下标的DOM对象
$(“选择器:lt(下标)”)	获取小于下标的所有DOM对象
$(“选择器:gt(下标)”)	获取大于下标的所有DOM对象

lt(less than) gt(greater than)

在过滤器中调用响应事件

  $("#btn1").click(function () {
                //过滤器
                var obj = $("div:first");
                obj.css("background", "red");
            })

就是上述格式即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            background: gray;
        }
    </style>
    <script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
        // 相当于是onLoad().
        $(function () {
            //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
            $("#btn1").click(function () {
                //过滤器
                var obj = $("div:first");
                obj.css("background", "red");
            })

            //绑定事件
            $("#btn2").click(function () {
                var obj = $("div:last");
                obj.css("background", "green");
            })

            //绑定btn3的事件
            $("#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");
            })

            $("#txt").keydown(function () {
                alert("keydown")
            })
        })


    </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"/>
</body>
</html>

表单属性过滤器

根据选中状态来进行选择

过滤器格式	功能
$(":text:enabled")	选择可用的文本框
$(":text:disabled")	选择不可用的文本框
$(":checkbox:checked")	复选框中的元素
选择器>option:selected	选择指定下来列表的被选中元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            background: gray;
        }
    </style>
    <script type="text/javascript" src="JS/jquery-3.4.1.js"></script>
    <script type="text/javascript">

        // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
        // 相当于是onLoad().
        $(function () {
            //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
            $("#btn1").click(function () {
                //获取所有可以使用的text
                var obj = $(":text:enabled");
                //设置 jquery数组值所有dom对象的value值
                obj.val("hello");
            })

            $("#btn2").click(function () {
                //获取选中的checkbox
                var obj = $(":checkbox:checked");
                for (var i = 0; i < obj.length; i++) {
                    //alert( obj[i].value);
                    alert($(obj[i]).val())
                }
            })

            $("#btn3").click(function () {
                //获取select选中的值
                //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="健身" 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/>
<button id="btn2">显示选中的复选框的值</button>
<br/>
<button id="btn3">显示选中下拉列表框的值</button>
</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>
    <meta charset="utf-8">
    <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 () {
                //val() 获取dom数组中第一个对象的value属性值
                var text = $(":text").val();
                alert(text)
            })

            $("#btn2").click(function () {
                //设置所有的text的value为新值
                $(":text").val("三国演义");
            })

            $("#btn3").click(function () {
                //获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
                alert($("div").text());
            })

            $("#btn4").click(function () {
                //设置div的文本值
                $("div").text("新的div文本内容");
            })

            $("#btn5").click(function () {
                //读取指定属性的值
                alert($("img").attr("src"));
            })

            $("#btn6").click(function () {
                //设置指定属性的,指定值
               $("img").attr("src","JS/ex2.jpg");
                //val(), text();
            })
        })


    </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 src="JS/ex1.jpg" id="image1"/>
<br/>

<input type="button" value="获取第一文本框的值" id="btn1"/>
<br/>
<br/>
<input type="button" value="设置所有文本框的value值" id="btn2"/>
<br/>
<br/>
<input type="button" value="获取所有div的文本值" id="btn3"/>
<br/>
<br/>
<input type="button" value="设置div的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="读取src属性的值" id="btn5"/>
<br/>
<br/>
<input type="button" value="设置指定的属性值" id="btn6"/>
</body>
</html>

语法	功能
$(选择器).remove()	将数组中所有 DOM 对象及其子对象一并删除
$(选择器).empty()	将数组中所有 DOM 对象的子对象删除
$(选择器).append(“ 我动态添加的 div ”)	为数组中所有 DOM 对象添加子对象
$(选择器).html()	无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)	有参数调用，用于设置 DOM 数组中所有元素的内容
$.each( 要遍历的对象, function(index,element) { 处理程序 } )	对数组， json 和 dom 数组等的遍历,对每个元素调用一次函数。

我们看一下完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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 () {
                //使用remove:删除父和子所有的dom对象
                $("select").remove();

            })

            $("#btn2").click(function () {
                //使用empty 删除子dom对象
                $("select").empty();
            })

            $("#btn3").click(function () {
                //使用append,增加dom对象
                //$("#facher").append("<input type='button' value='我是增加的按钮' />")

                //增加一个table
                $("#father").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
            })

            $("#btn4").click(function () {
                //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
                //alert($("span").text()); // 我是mysql数据库
                //保留和不保留标签内容
                alert($("span").html()); //我是mysql <b>数据库</b>

            })

            $("#btn5").click(function () {
                //使用 html(有参数):设置dom对象的文本值
                $("span").html("我是新的<b>数据</b>");

            })

            $("#btn6").click(function () {
                //循环普通数组,非dom数组
                var arr = [11, 12, 13];
                //每个成员都会调用，此时的i和n都是从数组中取的
                $.each(arr, function (i, n) {
                    alert("循环变量：" + i + "=====数组成员:" + n);
                })
            })

            $("#btn7").click(function () {
                //循环json
                var json = {"name": "张三", "age": 20};

                //var  obj = eval("{'name':'张三','age':20}");
                $.each(json, function (i, n) {
                    alert("i是key=" + i + ",n是值=" + n);
                })

            })

            $("#btn8").click(function () {
                //循环dom数组
                var domArray = $(":text");//dom数组

                $.each(domArray, function (i, n) {
                    // n 是数组中的dom对象
                    alert("i=" + i + "  , n=" + n.value);
                })
            })

            $("#btn9").click(function () {
                //循环jquery对象, jquery对象就是dom数组
                $(":text").each(function (i, n) {
                    alert("i=" + i + "，n=" + n.value);
                })

            })
        })


    </script>
</head>
<body>
<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/>

<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/>
<br/>
<input type="button" value="使用empty删子对象" id="btn2"/>
<br/>
<br/>
<input type="button" value="使用append,增加dom对象" id="btn3"/>
<br/>
<br/>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<br/>
<br/>
<input type="button" value="设置span的所有dom的文本值" id="btn5"/>
<br/>
<br/>
<input type="button" value="循环普通数组" id="btn6"/>
<br/>
<br/>
<input type="button" value="循环json" id="btn7"/>
<br/>
<br/>
<input type="button" value="循环dom数组" id="btn8"/>
<br/>
<br/>
<input type="button" value="循环jquery对象" id="btn9"/>
</body>
</html>

用on绑定事件

语法： $(选择器).on(event,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据， json 格式
function: 可选。规定当事件发生时运行的函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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 id='newBtn' type='button' value='我是新加入的按钮'/>");
                //使用on给按钮绑定事件
                $("#newBtn").on("click", function () {
                    alert("新建的按钮被单击了");
                })
                //两者语法等价
                /*
                     $("#newBtn").click(function () {
                         alert("被单击了");
                     })
                */
            })


        })


    </script>
</head>
<body>

<div id="mydiv">
    我是一个div ，需要增加一个button
</div>

<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
<br/>

</body>
</html>

Ajax函数

参考博客复习Ajax
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

关键字	含义
async	布尔值，表示请求是否异步处理。默认是 true
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。application/json格式居多
data	规定要发送到服务器的数据，可以是： string，数组，多数是 json
dataType	期望从服务器响应的数据类型。 jQuery 从 xml, json, text, html 这些中测试最可能的类型
error(xhr,status,error)	如果请求失败要运行的函数
success(result,status,xhr)	当请求成功时运行的函数
url	请求的地址
type	请求方式（get、post）

error() , success()中的 xhr 是 XMLHttpRequest 对象。

来看一下实际应用
可以实现之前Ajax实现的内容

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#btn").click(function () {
                //获取dom的value值
                var proid = $("#proid").val();
                //发起ajax请求
                //必备套餐 url;type;data;datatype
                $.ajax({
                    url: "queryjson", type: "get", data: {
                        "proid": proid
                    }, datatype: "json",
                    success: function (resp) {
                        alert(resp + resp.jiancheng);
                        $("#proname").val(resp.name);
                        $("#projiancheng").val(resp.jiancheng);
                        $("#proshenghui").val(resp.shenghui);
                    }
                })
            })
        })


    </script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
    <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>

我们再来看一个应用，实现级联查询省份和省会

index部分

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>省市级级联测试</title>
</head>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
    function loadDataAjax() {
        $.ajax({
                url: "queryprovince",
                type: "get",
                dataType: "json",
                success: function (resp) {
                    //删除原有数据，不然每次点都会新增多的数据
                    $("#province").empty();
                    alert(resp);
                    //resp得到一个JSON数组，用each来循环
                    $("#province").append("<option value='" + "'>" + "请选择省份" + "</option>");
                    $.each(resp, function (i, n) {
                        //获取dom对象
                        $("#province").append("<option value='" + n.id + "'>" + n.name + "</option>");
                    })
                }
            }
        )
    }

    $(function () {
        //  $(function()）在页面的dom的对象加载成功后执行的函数， 在此发起ajax。
        loadDataAjax();

        //绑定事件
        $("#btnLoad").click(function () {
            loadDataAjax();
        })

        //给省份的select绑定一个change事件，当select内容发生变化时，触发事件
        $("#province").change(function () {

            //获取选中的列表框的值
            var obj = $("#province>option:selected");
            alert(" select 的change 事件" + obj.val() + "====" + obj.text())

            var provinceId = obj.val(); // 1 ,2, 3

            //做一个ajax请求，获取省份的所有城市信息
            $.get("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>
<body>
<p> 省市级级联</p>
<div>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                省份：
            </td>
            <td>
                <select id="province">
                    <option value="0">请选择.....</option>
                </select>
                <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>

QueryDao文件补充一个方法

 public List<City> queryCityList(Integer provinceId) {
        List<City> cities = new ArrayList<>();
        try {
            City city = null;
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url, username, password);
            sql = "select id,name from city where provinceid=?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1, provinceId);
            rs = pst.executeQuery();
            while (rs.next()) {
                city = new City();
                city.setId(rs.getInt("id"));
                city.setName(rs.getString("name"));
                cities.add(city);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs != null) {
                    rs.close();
                }
            } catch (Exception ex) {
                ex.printStackTrace();
            }

            try {
                if (pst != null) {
                    pst.close();
                }
            } catch (Exception ex) {
                ex.printStackTrace();
            }

            try {
                if (conn != null) {
                    conn.close();
                }
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }
        return cities;
    }

再写一个Servlet和Province类似

package controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.QueryDao;
import entity.City;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

public class QueryCityServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String ProvinceId = request.getParameter("proid");
        String json = "{}";
        //判断是否取到了数据
        if (ProvinceId != null && !"".equals(ProvinceId.trim())) {
            QueryDao dao = new QueryDao();
            List<City> cityList = dao.queryCityList(Integer.valueOf(ProvinceId));
            ObjectMapper objectMapper = new ObjectMapper();
            json = objectMapper.writeValueAsString(cityList);
        }

        //输出JSON格式数据，响应Ajax请求
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(json);
        pw.flush();
        pw.close();
    }
}

看看效果
在这里插入图片描述

结束时间：2021-09-17

高开低走。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门

jQueryjQuery是js库，库:相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的用js代码写的function来看一段代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script type="text/javascrip
复制链接

扫一扫

专栏目录