Ajax和jQuery

夹谷山

2023-12-01

Ajax和jQuery

一、Ajax

1、Ajax概述

ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。
- Asynchronous: 异步的意思
- JavaScript：javascript脚本，在浏览器中执行
- xml : 是一种数据格式
ajax是一种做局部刷新的方法，不是一种语言。是浏览器客户端上的前端技术，是多个技术联合实现的产物。
ajax包含的技术主要有javascript，dom，css,，xml等等。核心是javascript 和 xml 。
- javascript：负责创建异步对象，发送请求，更新页面的dom对象。
- xml：网络中的传输的数据格式。使用json替换了xml 。
ajax请求需要服务器端的数据。
最大的优势：无刷新获取数据。

2、XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

比如说：一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男”

用 XML 表示：

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

用 JSON 表示

{"name":"孙悟空","age":18,"gender":"男"}

3、AJAX的特点

（1） AJAX 的优点：

可以无需刷新页面而与服务器端进行通信。
允许根据用户事件来更新部分页面内容。

（2） AJAX 的缺点：

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好（Search Engine Optimization 搜索引擎优化）

4、 AJAX 的使用

（1）核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

（2）使用步骤：

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

设置请求信息（初始异步请求对象）

//.open(method, url,同步异步请求（默认是true，异步请求）);
xmlHttp.open("get", "loginServletname=zs&pwd=123",true);
//可以设置请求头，一般不设置

发送请求

xmlHttp.send(body) //get 请求不传 body 参数，只有 post 请求使用

//获取服务器端返回的数据， 使用异步对象的属性 responseText.
//xmlHttp.responseText

接收响应

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange= function(){
       处理请求的状态变化。
		 if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
           //可以处理服务器端的数据，更新当前页面
			  var data = xmlHttp.responseText;
			  document.getElementById("name").value= data;
		 }
    }

（3）解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

（4）AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
- 0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
- 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
- 2: 表示 send()方法已经执行，并且头信息和状态码已经收到
- 3: 表示正在接收服务器传来的 body 部分的数据。
- 4: 表示服务器数据已经完全接收，或者本次接收已经失败了

在4的时候，开发人员做什么更新当前页面。

异步对象的status属性，表示网络请求的状况: 200， 404， 500，当status==200时，表示网络请求是成功的。

5、Ajax实例

（1）计算BMI

①全局刷新计算BMI

需求：计算某个用户的 BMI。用户在 jsp 输入自己的身高，体重；servlet 中计算 BMI，并显示 BMI 的计算结果和建议。

package com.cooler.controller;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

/**
 * @author CoolEr
 * @create 2022/2/23
 */
public class BmiServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1、接收请求参数
        String name = request.getParameter("name");
        String height = request.getParameter("h");
        String weight = request.getParameter("w");

        //2、计算BMI= 体重/身高的平方
        float h = Float.valueOf(height);
        float w = Float.valueOf(weight);

        float bmi = w / (h * h);

        //3、判断BMI的范围
        String msg = "";
        if(bmi <= 18.5){
            msg = "您比较瘦";
        }else if(bmi > 18.5 && bmi <= 23.9){
            msg = "您的BMI是正常的";
        }else if(bmi > 24 && bmi <= 27){
            msg = "您的身体比较胖";
        }else{
            msg = "您的身体属于肥胖";
        }
        msg = "您好！" + name + "您的BMI值是" + bmi + "," + msg;
        System.out.println(msg);

        request.setAttribute("msg",msg);
        request.getRequestDispatcher("/result.jsp").forward(request,response);
    }
}

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/2/23
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>结果页面</title>
</head>
<body>
        <p>显示BMI结果</p>
        <h3>${msg}</h3>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/2/23
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>全局刷新</title>
  </head>
  <body>
      <p>全局刷新计算BMI</p>
      <form action="bmiServlet" method="get">
        姓名：<input type="text" name="name"><br>
       体重（KG）：<input type="text" name="w"><br>
        身高（M）：<input type="text" name="h"><br>
        <input type="submit" value="提交">
      </form>
  </body>
</html>

②ajax局部刷新计算BMI

//1、接收请求参数
String name = request.getParameter("name");
String height = request.getParameter("h");
String weight = request.getParameter("w");

//2、计算BMI= 体重/身高的平方
float h = Float.valueOf(height);
float w = Float.valueOf(weight);

float bmi = w / (h * h);

//3、判断BMI的范围
String msg = "";
if(bmi <= 18.5){
    msg = "您比较瘦";
}else if(bmi > 18.5 && bmi <= 23.9){
    msg = "您的BMI是正常的";
}else if(bmi > 24 && bmi <= 27){
    msg = "您的身体比较胖";
}else{
    msg = "您的身体属于肥胖";
}
msg = "您好！" + name + "您的BMI值是" + bmi + "," + msg;
System.out.println(msg);

response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(msg);

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/2/23
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新——ajax</title>
    <script type="text/javascript">

        function doAjax(){
            //1、创建异步对象
            var xmlHTTP = new XMLHttpRequest();
            //2、绑定事件
            xmlHTTP.onreadystatechange = function () {
                if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
                    alert(xmlHTTP.responseText);
                }
            }
            //3、初始请求对象
            var name = document.getElementById("name").value;
            var w = document.getElementById("w").value;
            var h = document.getElementById("h").value;

            var param = "name=" + name + "&w=" +w +"&h=" + h;

            xmlHTTP.open("get","bmiAjax?"+param,true);
            //4、发起请求
            xmlHTTP.send();
        }

    </script>
  </head>
  <body>
      <div>
        姓名：<input type="text" id="name" /><br>
       体重（KG）：<input type="text" id="w" /><br>
        身高（m)：<input type="text" id="h" /><br>
        <input type="button" value="计算bmi" οnclick="doAjax()">
      </div>
  </body>
</html>

更新dom对象

if( xmlHttp.readyState == 4 && xmlHttp.status ==200){
                     // alert(xmlHttp.responseText);
                      var  data = xmlHttp.responseText;
                      //更新dom对象， 更新页面数据
                      document.getElementById("mydata").innerText = data;
}

……
<div id="mydata">等待加载数据....</div>

（2）根据省份 id 查询省份名称

需求：用户在文本框架输入省份的编号 id，在其他文本框显示省份名称

数据库：cooler
数据表：

省份信息表：
CREATE TABLE `province` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
 `jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
 `shenghui` varchar(255) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

城市信息表：
CREATE TABLE `city` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(255) DEFAULT NULL,
 `provinceid` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

json分类：
- json对象，JSONObject ,这种对象的格式：名称:值，也可以看做是 key:value 格式。
- json数组， JSONArray, 基本格式：
- [{ name:“河北”, jiancheng:“冀”,“shenghui”:“石家庄”} , { name:“山西”, jiancheng:“晋”,“shenghui”:“太原”} ]

处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib

Province p = new Province();
ObjectMapper om = new ObjectMapper();//把参数的java对象转为json格式的字符串
String json = om.writeValueAsString(p);

在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

 var data = xmlHttp.responseText;
                    
//eval是执行括号中的代码， 把json字符串转为json对象
 var jsonobj = eval("(" + data + ")");

①功能实现代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script type="text/javascript">
        function  doSearch() {
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function() {
                if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
                    var data = xmlHttp.responseText;

                    //eval是执行括号中的代码， 把json字符串转为json对象
                    var jsonobj = eval("(" + data + ")");
                    //更新dom对象
                    callback(jsonobj);
                }
            }

            //3.初始异步对象的请求参数
            var proid = document.getElementById("proid").value;

            // true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。
            // false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。

            xmlHttp.open("get","queryjson?proid="+proid,true);

            //4.发送请求
            xmlHttp.send();

        }

        //定义函数，处理服务器端返回的数据
        function callback(json){
            document.getElementById("proname").value = json.name;
            document.getElementById("projiancheng").value=json.jiancheng;
            document.getElementById("proshenghui").value= json.shenghui;
        }

    </script>
</head>
<body>
    <p>ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号：</td>
            <td><input type="text" id="proid">
                <input type="button" value="搜索" οnclick="doSearch()">
            </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>

package com.cooler.controller;

import jakarta.servlet.http.HttpServlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import com.cooler.dao.ProvinceDao;

import java.io.IOException;
import java.io.PrintWriter;

/**
 * @author CoolEr
 * @create 2022/2/23
 */
public class QueryProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req,
                         HttpServletResponse resp) throws ServletException, IOException {
        //处理get请求
        String strProid = req.getParameter("proid");
        System.out.println("strProid:"+ strProid);

        String name = "默认是无数据";
        //访问dao，查询数据库
        if( strProid != null && !"".equals(strProid.trim()) ){
            //创建dao对象，调用它的方法
            ProvinceDao dao  = new ProvinceDao();
            name  = dao.queryProviceNameById( Integer.valueOf(strProid));
        }


        //使用HttpServletResponse输出数据
        // servlet返回给浏览器的是 文本数据， 数据的编码是utf-8
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw  = resp.getWriter();
        //pw.println("中国");
        pw.println(name);
        pw.flush();
        pw.close();
    }
}

package com.cooler.dao;

import com.cooler.entity.Province;

import java.sql.*;

//使用jdbc访问数据库
public class ProvinceDao {

    //根据id获取名称
    public String queryProviceNameById(Integer proviceId){
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs  = null;
        String sql= "";

        String url="jdbc:mysql://localhost:3306/cooler";
        String username="root";
        String password="3399";

        String name = "";
        //加载驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            //创建PreparedStatement
            sql="select  name from province where id=?";
            pst = conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,proviceId);
            //执行sql
            rs = pst.executeQuery();
            //遍历rs
            /*while(rs.next()){ //当你的rs中有多余一条记录时。
               name =  rs.getString("name");
            }*/

            if( rs.next()){
                name =rs.getString("name");
            }

        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        } finally {
            try{
                if( rs != null){
                    rs.close();
                }
                if( pst != null){
                    pst.close();
                }
                if( conn != null){
                    conn.close();
                }

            }catch(Exception e){
                e.printStackTrace();
            }

        }
        return name;
    }


    //根据id获取一个完整的Province对象
    public Province queryProviceById(Integer proviceId){
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs  = null;
        String sql= "";

        String url="jdbc:mysql://localhost:3306/cooler";
        String username="root";
        String password="3399";

        Province province = null;
        //加载驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            //创建PreparedStatement
            sql="select id, name, jiancheng, shenghui  from province where id=?";
            pst = conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,proviceId);
            //执行sql
            rs = pst.executeQuery();
            //遍历rs
            /*while(rs.next()){ //当你的rs中有多余一条记录时。
               name =  rs.getString("name");
            }*/

            if( rs.next()){
                province  = new Province();
                province.setId( rs.getInt("id"));
                province.setName(rs.getString("name"));
                province.setJiancheng(rs.getString("jiancheng"));
                province.setShenghui(rs.getString("shenghui"));
            }

        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        } finally {
            try{
                if( rs != null){
                    rs.close();
                }
                if( pst != null){
                    pst.close();
                }
                if( conn != null){
                    conn.close();
                }

            }catch(Exception e){
                e.printStackTrace();
            }

        }
        return province;
    }
}

package com.cooler.controller;

import com.cooler.dao.ProvinceDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;


import java.io.IOException;
import java.io.PrintWriter;

public class QueryJsonServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //默认值， {} ：表示json格式的数据
        String json = "{}";

        // 获取请求参数，省份的id
        String strProid = request.getParameter("proid");
        System.out.println("strProid========="+strProid);

        //判断proid有值时，调用dao查询数据
        if( strProid != null && strProid.trim().length() > 0 ){
            ProvinceDao dao  = new ProvinceDao();
            Province p  = dao.queryProviceById(Integer.valueOf(strProid));
            //需要使用jackson 把  Provice对象转为  json
            ObjectMapper om  = new ObjectMapper();
            json =  om.writeValueAsString(p);
        }

        //把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
        //指定服务器端（servlet）返回给浏览器的是json格式的数据,json数据使用utf-8编码的
        //response.setContentType("text/json;charset=utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw  = response.getWriter();
        /**
         *  <provines>
         *      <province>
         *          <name>河北</name>
         *          <shenghui>石家庄</shenghui>
         *      </province>
         *       <province>
         *          <name>山西</name>
         *          <shenghui>太原</shenghui>
         *       </province>
         *  </provines>
         */
        pw.println(json); //输出数据---会付给ajax中 responseText属性
        pw.flush();
        pw.close();
    }
}

package com.cooler.controller;

import com.cooler.dao.ProvinceDao;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;


import java.io.IOException;
import java.io.PrintWriter;

public class QueryProviceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req,
                         HttpServletResponse resp) throws ServletException, IOException {
       //处理get请求
        String strProid = req.getParameter("proid");
        System.out.println("strProid:"+ strProid);

        String name = "默认是无数据";
        //访问dao，查询数据库
        if( strProid != null && !"".equals(strProid.trim()) ){
            //创建dao对象，调用它的方法
            ProvinceDao dao  = new ProvinceDao();
            name  = dao.queryProviceNameById( Integer.valueOf(strProid));
        }


        //使用HttpServletResponse输出数据
        // servlet返回给浏览器的是 文本数据， 数据的编码是utf-8
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw  = resp.getWriter();

        pw.println(name);
        pw.flush();
        pw.close();
    }
}

二、jQuery

1、jQuery概述

jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML DOM 操作。
jQuery优点：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。
- write less do more
- 免费，开源且轻量级的 js 库，容量很小
- 兼容市面上主流浏览器，例如 IE，Firefox，Chrome
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
- 通过 ID 属性：document.getElementById()
- 通过 class 属性：getElementsByClassName()
- 通过标签名：document.getElementsByTagName()
jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

2、使用jQuery的第一个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个例子</title>
		<!--指定jQuery库的位置-->
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function(){
				alert("Hello jQuery")
			})
		</script>
	</head>
	<body>
	</body>
</html>

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

$( function(){
				//代码内容
				alert("Hello JQuery 快捷方式")
		  }    
)

3、dom对象和jquery对象

（1）dom对象

使用javascript的语法创建的对象叫做dom对象，也就是js对象。

var obj =  document.getElementById("txt1");  obj是dom对象，也叫做js对象
obj.value;

（2）jquery对象

使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。

 例如  var jobj =  $("#txt1") //jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。现在数组中就一个值。

（3）dom对象可以和jquery对象相互的转换。

dom对象可以转为jquery
- 语法： $(dom对象)

<!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">
			function btnClick(){
				var domBtn = document.getElementById("btn");
				alert("1 = " +domBtn.value);
				
				var $btn = $(domBtn);
				alert("2 = " +$btn.val());
			}
		</script>
	</head>
	<body>
		<div align="center">
			<input type="button" id="btn" value="我要成为jQuery对象" onclick="btnClick()"/>
		</div>
	</body>
</html>

jquery对象也可以转为dom对象
- 语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get（0）。

<!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">
			function btnClick(){
				//使用jquery的语法,获取页面中的dom对象
				//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
				var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
				//alert( obj.value)
				
				var num  = obj.value;
				obj.value = num * num;
			}
			
		</script>
	</head>
	<body>
		<div>
			 <input type="button" value="计算平方" onclick="btnClick()" /><br/>
			 <input type="text" id="txt" value="整数" />
		</div>
	</body>
</html>

进行dom和jquery的转换：目的是要使用对象的方法，或者属性。当你是dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

4、选择器

（1）基本选择器

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象。
就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

①id选择器

通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。
语法：$(“#dom对象的id值”)

②class选择器

语法： $(".class样式名)
class表示css中的样式，使用样式的名称定位dom对象的。

③标签选择器

语法： $(“标签名称”)
使用标签名称定位dom对象的

④所有选择器

语法：$(“*”) 选取页面中所有 DOM 对象。

⑤组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background: gray;
				width: 200px;
				height: 100px;
			}
			
			.two{
				background: gold;
				font-size: 20pt;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//id选择器
				var obj = $("#one");
				//使用jquery中改变样式的函数
				obj.css("background","red");
			}
			
			function fun2(){
				//使用样式选择器
				var obj = $(".two");
				obj.css("background","yellow");
			}
			
			function fun3(){
				//标签选择器
				var obj = $("div"); //数组有3个对象
				//jquery的操作都是操作数组中的全部成员.
				//所以是给所有的div都设置的背景色
				obj.css("background","blue");
			}
			
			function fun4(){
				var obj = $("*");
				obj.css("background","green");
			}
			
			function fun5(){
				var obj = $("#one,span");
				//obj.css("background","red");
				
				 //obj是一个数组, 有两个成员, 1 是span dom对象
				 //$(  obj[1] ) : jquery对象
				// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
				$(  obj[1]  ).css("background","green");//就是span
				
			}
			
			document.getElementById("one"); //js的语法规则 ,value
			$("#one"); //jquery语法
			
		</script>
	</head>
	<body>
		
		<div id="one">我是one的div</div><br/>
		<div class="two">我是样式是two的div</div>
		<br/>
		<div>我是没有id，class的div</div>
		<br/>
		
		<span class="two">我是span标签</span>
		<br/>
		<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
		<br/>
		<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
		<br/>
		<input type="button" value="使用标签选择器" onclick="fun3()" /> 
		<br/>
		<input type="button" value="所有选择器" onclick="fun4()"/>
		<br/>
		<input type="button" value="组合选择器" onclick="fun5()"/>
	</body>
</html>

（2）表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。（使用标签的type属性值，定位dom对象的方式。）
语法： $(“:type 属性值”)
例如： $(“:text”) ,选择的是所有的单行文本框，
$(“:button”) ,选择的是所有的按钮。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			function fun1(){
				//使用表单选择器 $(":type的值")
				var obj = $(":text");
				//获取value属性的值 val()是jquery中的函数, 读取value属性值
				alert( obj.val());
			}
			
			function fun2() {
				//定位radio
				var obj = $(":radio");//数组,目前是两个对象 man ,woman
				//循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
				for(var i=0;i<obj.length;i++){
					//从数组值获取成员,使用下标的方式
					var  dom = obj[i];
					//使用dom对象的属性,获取value值
					alert(dom.value)
				}
			}
			
			function fun3(){
				//定位checkbox
				var obj = $(":checkbox"); //数组,有三个对象
				for(var i=0;i<obj.length;i++){
					var dom = obj[i];
					//alert(dom.value);
					//使用jqueyr的val函数, 获取value的值
					//1. 需要jquery对象
					var jObj = $(dom); // jObj 是jquery对象
					//2. 调用jquery函数
					alert("jquery的函数调用=" + jObj.val());
					
				}
				
			}

		</script>
	</head>
	<body>
		<input type="text" value="我是type=text" /><br/>
		<br/>
		<input type="radio" value="man" /> 男 <br/>
		<input type="radio" value="woman" /> 女 <br/>
		<br/>
		<input type="checkbox" value="bike" /> 骑行 <br/>
		<input type="checkbox" value="football" /> 足球 <br/>
		<input type="checkbox" value="music" /> 音乐 <br/>
		<br/>
		<input type="button" value="读取text的值" onclick="fun1()"/>
		<br/>
		<input type="button" value="读取radio的值" onclick="fun2()"/>
		<br/>
		<input type="button" value="读取checkbox的值" onclick="fun3()"/>
	</body>
	</body>
</html>

5、过滤器

在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

（1）基本过滤器

①选择第一个 first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

②选择最后个last,保留数组中最后DOM对象

语法：$(“选择器:last”)

③选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

④选择数组中小于指定索引的所有DOM对象

语法：$(“选择器:lt(数组索引)”)

⑤选择数组中大于指定索引的所有DOM对象

语法：$(“选择器:gt(数组索引)”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: gray;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.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>
	</body>
</html>

jquery中给dom对象绑定事件

$(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分，例如 js中的单击事件 onclick(), jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件

$(“#btn”).click(funtion(){
alert(“btn按钮单击了”)
})

on 事件绑定

$(选择器).on( 事件名称 , 事件的处理函数)
事件名称：就是js事件中去掉on的部分，例如js中onclick ,这里就是click
事件的处理函数： function 定义。

  例如， <input type="button" id="btn">
   $("#btn").on("click", function() { 处理按钮单击 } )

（2）表单属性对象过滤器

根据表单中dom对象的状态情况，定位dom对象的。
- 启用状态， enabled
- 不可用状态 disabled
- 选择状态， checked ，例如radio， checkbox
选择可用的文本框
- $(“: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.6.0.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>

6、函数

（1）第一组

**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.6.0.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","img/untitled.png");
					//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="img/mid_28cda67a5c268e9.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>

（2）第二组

hide

$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
show

$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
remove

$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
empty

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
**append：**为数组中所有 DOM 对象添加子对象

$(选择器).append(“

我动态添加的 div
”)
**html：**设置或返回被选元素的内容（innerHTML）。

$(选择器).html()：无参数调用方法，获取 DOM 数组第一个元素的内容。

$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
**each：**each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
- 语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
- 语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标

element: 数组的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: yellow;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.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对象
					//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
					
					//增加一个table
					$("#fatcher").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];
					$.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="fatcher">我是第一个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>

7、AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。
没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理。

（1）$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：$.ajax( { name:value, name:value, … } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等

（2）$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
- url 必需。规定您需要请求的 URL。
- data 可选。规定连同请求发送到服务器的数据。
- function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。

（3）$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()

（4）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方式。

  	$.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"
  			 }  
  										 
  			)

主要使用的是 url , data ,dataType, success .

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

        $(function(){
            $("#btn").click(function () {
                //获取dom的value值
                var proid = $("#proid").val();
                //发起ajax请求
                $.ajax({
                    url:"queryjson",
                    data:{
                        "proid":proid
                    },
                    dataType:"json",
                    success:function (resp) {
                        //resp是json对象
                        //alert(resp.name + " === "+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>

（5）使用 AJAX级联

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/2/24
  Time: 18:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>省市级联查询</title>
  <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    function loadDataAjax() {
      //做ajax请求，使用jquery的$.ajax()
      $.ajax({
        url:"queryProvince",
        dataType:"json",
        success:function( resp ){
          //删除旧的数据，把已经存在的数据清空
          $("#province").empty();
          //[{"id":1,"name":"河北","jiancheng":"冀","shenghui":"石家庄"},{}]
          $.each( resp, function (i,n) {
            //获取select这个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请求，获取省份的所有城市信息
        $.post("queryCity",{proid:provinceId,name:"Lisi",age:20},callback,"json");

      })

    })


    //定义一个处理返回数据的函数
    function callback(resp){
      //清空select列表
      $("#city").empty();
      $.each( resp, function(i,n){
        $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>")
      })
    }

  </script>
</head>
<body>
<p>省市级联查询,使用ajax</p>
<div>
  <table border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        省份：
      </td>
      <td>
        <select id="province">
          <option value="0">请选择.....</option>
        </select>
        <!--<input type="button" 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

package com.cooler.dao;

import com.cooler.entity.City;
import com.cooler.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/cooler";
    private String username="root";
    private String password="3399";

    //查询所有的省份信息
    public List<Province> queryProvinceList(){
        List<Province> provinces  = new ArrayList<>();
        try{
            Province p = null;
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
            sql="select id,name,jiancheng,shenghui from province order by id";
            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"));
                provinces.add(p);
            }
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                if( rs != null){
                    rs.close();
                }
                if( pst != null){
                    pst.close();
                }
                if( conn != null){
                    conn.close();
                }
            }catch (Exception ex){
                ex.printStackTrace();
            }
        }
        return provinces;
    }

    //查询一个省份下面的所有城市
    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();
                }
                if( pst != null){
                    pst.close();
                }
                if( conn != null){
                    conn.close();
                }
            }catch (Exception ex){
                ex.printStackTrace();
            }
        }
        return cities;
    }
}

QueryProvinceServlet

package com.cooler.controller;

import com.cooler.dao.QueryDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

public class QueryProviceServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "{}";
        //调用dao，获取所有的省份信息， 是一个List集合
        QueryDao dao  = new QueryDao();
        List<Province> provinces = dao.queryProvinceList();
        //把list转为json格式的数据，输出给ajax请求
        if( provinces != null ){
            //调用jackson工具库，实现List--json
            ObjectMapper om  = new ObjectMapper();
            json = om.writeValueAsString(provinces);
        }

        //输出json数据，响应ajax请求的，返回数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw  = response.getWriter();
        pw.println(json);
        pw.flush();
        pw.close();
    }
}

QueryCityServlet

package com.cooler.controller;

import com.cooler.dao.QueryDao;
import com.cooler.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

public class QueryProviceServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "{}";
        //调用dao，获取所有的省份信息， 是一个List集合
        QueryDao dao  = new QueryDao();
        List<Province> provinces = dao.queryProvinceList();
        //把list转为json格式的数据，输出给ajax请求
        if( provinces != null ){
            //调用jackson工具库，实现List--json
            ObjectMapper om  = new ObjectMapper();
            json = om.writeValueAsString(provinces);
        }

        //输出json数据，响应ajax请求的，返回数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw  = response.getWriter();
        pw.println(json);
        pw.flush();
        pw.close();
    }
}

Ajax和jQuery

Ajax和jQuery

一、Ajax

1、Ajax概述

2、XML 简介

3、AJAX的特点

（1） AJAX 的优点：

（2） AJAX 的缺点：

4、 AJAX 的使用

（1） 核心对象

（2） 使用步骤：

（3） 解决 IE 缓存问题

（4）AJAX 请求状态

5、Ajax实例

（1）计算BMI

①全局刷新计算BMI

②ajax局部刷新计算BMI

（2）根据省份 id 查询省份名称

①功能实现代码

二、jQuery

1、jQuery概述

2、使用jQuery的第一个例子

3、dom对象和jquery对象

（1）dom对象

（2）jquery对象

（3）dom对象可以和jquery对象相互的转换。

4、选择器

（1）基本选择器

（2）表单选择器

5、过滤器

（1）基本过滤器

jquery中给dom对象绑定事件

on 事件绑定

（2）表单属性对象过滤器

6、函数

（1）第一组

（2）第二组

7、AJAX

（1）$.ajax()

（2）$.get()

（3）$.post()

（4）json结构的参数说明：

（5）使用 AJAX级联

相关阅读

相关文章

相关问答

相关文档

（1）核心对象

（2）使用步骤：

（3）解决 IE 缓存问题