（Jquery使用（javascript库）+ ajax）前端 + (jdbc + servlet + javaee)后端实现简单的级联查询

文章目录

jQuery

核心思想0.简介

加入jquery库 1. DOM 对象和 jQuery 对象

1）DOM 对象转换 jQuery 对象2）jQuery 对象转为 DOM 对象 2. 选择器(和CSS的一样)

1）基本选择器

a. id 选择器b. class选择器c. 标签选择器d. 所有选择器e. 组合选择器

使用 2）表单选择器

使用 3. 过滤器

1）基本过滤器

a. 选择第一个 first, 保留数组中第一个 DOM 对象b. 选择最后个 last, 保留数组中最后 DOM 对象c. 选择数组中指定对象d. 选择数组中小于指定索引的所有 DOM 对象e. 选择数组中大于指定索引的所有 DOM 对象

. 使用例子 2）表单过滤器

a. 选择可用的文本框b. 选择不可用的文本框c.复选框选中的元素d. 选择指定下拉列表的被选中元素 4. jQuery对象的方法

什么是父标签和子标签jquery方法

a. val ★b. text ★c. attr ★d. hidee. showf. remove ★g. empty ★h. append ★i. htmlj. each ★ 5. 绑定事件

★ jquery中加载页面完成执行的函数1）属性绑定2）on(事件，处理函数)绑定事件3）常用事件 ajax响应★

$.ajax()$.get()$.post() 使用jQuery例子(级联查询)

数据库表：级联分析 1. 创建maven工程2. 加入maven依赖3. 创建实体类

province实体类city实体类 4. 创建操作数据库的dao类

1）操作province表的dao，获取省份名字和id2）操作city表的dao，根据省份id获取城市名字 5. 创建处理后台请求的servlet对象

1）创建servlet对象(处理前端的请求，将数据放回前端)2）在web.xml中注册servlet 6. 创建操作页面，发生ajax请求获取数据

ajax使用post函数使用效果

jQuery 核心思想

jQuery对象是dom的数组

0.简介

jQuery 是一款跨主流浏览器的 Javascript 库，封装了 Javascript 相关方法调用，简化Javascript 对 HTML DOM 操作

加入jquery库

将jquery库的文件加入到 js 目录下，然后再需要使用jquery库的页面的标签中加入下面的语句

注意，不能用

简写（更常用）

		$(function(){
			//需要绑定的事件
			//需要加载的资源
		})

1）属性绑定

语法：$(选择器).监听事件名称(处理函数);

说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1

$("button").click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2

$("tr").mouseover(fun2)

2）on(事件，处理函数)绑定事件

on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法

语法：$(选择器).on(event,data,function)

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

3）常用事件

ajax响应★

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象。

$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：

$.ajax( { name:value, name:value, ... } )

说明：参数是 json 的数据，包含请求方式，数据，回调方法等

async ：布尔值，表示请求是否异步处理。默认是 truecontentType ：发送数据到服务器时所使用的内容类型。默认是：
“application/x-www-form-urlencoded”。data：规定要发送到服务器的数据，可以是：string，数组，多数是 jsondataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能
的类型

“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回

error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参
名type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写url：规定发送请求的 URL。
以上是常用的参数。
error() , success()中的 xhr 是 XMLHttpRequest 对象。

$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法：$.get(url,data,function(data,status,xhr),dataType)

url 必需。规定您需要请求的 URL。data 可选。规定连同请求发送到服务器的数据。function(data,status,xhr)可选。当请求成功时运行的函数。 data,status,xhr 是自定义形参名。
参数说明：

data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回

$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法：$.post(URL,data,function(data,status,xhr),dataType)

参数同$get()

使用jQuery例子(级联查询)

级联查询: 当选择的省份改变的时候，城市对应的下拉框数据也跟着改变

数据库表：

province表

city表

级联分析

在页面初始化的时候需要从数据中取出province表中的信息，显示在第一个下拉框中，供用户选择省份用户选择省，根据省的名字从province表中查询出省的id，有了id之后就可以在city表中选择出对应省份的城市，将数据返回到前端显示

需要2次访问后台:

初始化数据，将省份信息展示给用户根据用户选择的省份更新城市信息 1. 创建maven工程

默认的web版本太低，需要更换版本
更新web配置文件的版本
将web.xml的内容更换成如下内容

2. 加入maven依赖

pom.xml文件修改为一下内容




  4.0.0

  com.changsha
  level-ajax
  1.0-SNAPSHOT
  war


  
    UTF-8
    1.8
    1.8
  

  
    
    
      junit
      junit
      4.11
      test
    
    
    
      javax.servlet
      javax.servlet-api
      3.1.0
      provided
    
    
    
      javax.servlet.jsp
      jsp-api
      2.2.1-b03
      provided
    

    
    
      com.fasterxml.jackson.core
      jackson-core
      2.9.0
    
    
      com.fasterxml.jackson.core
      jackson-databind
      2.9.0
    

    
    
      mysql
      mysql-connector-java
      8.0.24
    

    
    
      org.webjars
      jquery
      3.5.1
    

  

  
    
      
        src/main/java
        
          ***.xml
        
        false
      
    
    
      
        maven-compiler-plugin
        3.1
        
          1.8
          1.8

3. 创建实体类

保存数据包一行的数据

province实体类

package com.changsha.entity;

public class Province {
    private Integer id;
    private String name;
    private String shenghui;
    private String jiancheng;

    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 getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }
}

city实体类

package com.changsha.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;
    }
}

4. 创建操作数据库的dao类 1）操作province表的dao，获取省份名字和id

package com.changsha.dao;

import com.changsha.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 ProvinceDao {
    private Connection connection = null;
    private PreparedStatement preparedStatement = null;
    private ResultSet resultSet = null;
    private String url = "jdbc:mysql://localhost:3306/study";
    private String username = "root";
    private String driver = "com.mysql.cj.jdbc.Driver";
    private String password = "123456";

    public List selectProvinces(){
        List provinces = new ArrayList<>();
        Province province = null;
        try {
            //连接数据库
            Class.forName(driver);
            connection = DriverManager.getConnection(url,username,password);
            //执行查询
            String sql = "select id,name from province";
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();
            while (resultSet.next()){
                province = new Province();
                province.setId(resultSet.getInt("id"));
                province.setName(resultSet.getString("name"));
                provinces.add(province);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try{
                if(connection != null){
                    connection.close();
                }
                if(preparedStatement != null){
                    preparedStatement.close();
                }
                if (resultSet != null){
                    resultSet.close();
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }

        return provinces;
    }

}

2）操作city表的dao，根据省份id获取城市名字

package com.changsha.dao;

import com.changsha.entity.City;
import com.changsha.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 CityDao {
    private Connection connection = null;
    private PreparedStatement preparedStatement = null;
    private ResultSet resultSet = null;
    private String url = "jdbc:mysql://localhost:3306/study";
    private String username = "root";
    private String driver = "com.mysql.cj.jdbc.Driver";
    private String password = "123456";

    public List selectCityByProvinceid(Integer id){
        List cities = new ArrayList<>();
        City city = null;
        try {
            //连接数据库
            Class.forName(driver);
            connection = DriverManager.getConnection(url,username,password);
            //执行查询
            String sql = "select name from city where provinceid = ?";
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setInt(1,id);
            resultSet = preparedStatement.executeQuery();
            while (resultSet.next()){
                city = new City();
                city.setName(resultSet.getString("name"));
                city.setId(resultSet.getInt("id"));
                cities.add(city);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try{
                if(connection != null){
                    connection.close();
                }
                if(preparedStatement != null){
                    preparedStatement.close();
                }
                if (resultSet != null){
                    resultSet.close();
                }
            }catch (Exception e){
                e.printStackTrace();
            }
        }

        return cities;
    }

}

5. 创建处理后台请求的servlet对象 1）创建servlet对象(处理前端的请求，将数据放回前端)

获取省份信息用的GET请求,用doGET方法处理请求
获取城市信息用POST请求,用doPOST方法处理请求

package com.changsha.servlet;

import com.changsha.dao.CityDao;
import com.changsha.dao.ProvinceDao;
import com.changsha.entity.City;
import com.changsha.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

public class ServletService extends HttpServlet {
    private ProvinceDao provinceDao = null;
    private CityDao cityDao = null;
//用get请求方法获取省份信息
    @Override
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {
        System.out.println("获取省份信息");
        //查询省份
        provinceDao = new ProvinceDao();
        List provinces = provinceDao.selectProvinces();
        //转为json数据
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writevalueAsString(provinces);
        //传回浏览器
        response.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter = response.getWriter();
        printWriter.write(json);
        printWriter.flush();
        printWriter.close();
    }

//    用post请求方法获取城市
    @Override
    protected void doPost(HttpServletRequest request,
                          HttpServletResponse response) throws ServletException, IOException {
        System.out.println("更具id获取城市信息");
        //获取参数和城市信息
        cityDao = new CityDao();
        String id = request.getParameter("provinceID");
        System.out.println(id);
        List cities = cityDao.selectCityByProvinceid(Integer.valueOf(id));
        //转换为json数据
        String json = "{}";
        if (cities != null){
            ObjectMapper objectMapper = new ObjectMapper();
            json = objectMapper.writevalueAsString(cities);
        }
        //将数据传回浏览器
        response.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter = response.getWriter();
        printWriter.write(json);
        printWriter.flush();
        printWriter.close();
    }
}

2）在web.xml中注册servlet



    
        queryPC
        com.changsha.servlet.ServletService
    
    
        queryPC
        /query

6. 创建操作页面，发生ajax请求获取数据

<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2022/3/19
  Time: 19:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    ajax级联查询
    
    


    
        城市查询表
            
            
                省份列表：
                
                    
                

            
            
                城市列表：

省份列表：
城市列表：

ajax使用

post函数使用

updataCities是请求成功后的处理函数

效果

（Jquery使用（javascript库）+ ajax）前端 + (jdbc + servlet + javaee)后端实现简单的级联查询

Java相关栏目本月热门文章