AJAX学习(三) --------- 根据省份ID来查询省份名称(项目实例)

---

前言

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

(1) 数据库表：

省份信息表

CREATE TABLE province (
   id int(11) NOT NULL AUTO_INCREMENT,
   name varchar(255) DEFAULT NULL COMMENT '省份名称',
   abbr varchar(255) DEFAULT NULL COMMENT '简称',
   proCap 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

项目结构 ：

项目是一个 web 应用， index.jsp 发送请求， SearchServlet 接收请求， 调用 ProvinceDao
从数据库获取指定 id 的省份名称

---

实现步骤

1. 将 city.sql 与 province.sql 导入数据库中

鼠标右键单击mydatabase数据库，点击执行sql文件，将两张表导入到此数据库中。

2. 创建实体类

在entity包中新建province类作为对表文件province.frm的映射

package entity;

public class province {
     private  Integer id;
     private  String name;
     private String addr;
     private String proCap;

     public province() {
     }

     public province(Integer id, String name, String addr, String proCap) {
          this.id = id;
          this.name = name;
          this.addr = addr;
          this.proCap = proCap;
     }

     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 getAddr() {
          return addr;
     }

     public void setAddr(String addr) {
          this.addr = addr;
     }

     public String getProCap() {
          return proCap;
     }

     public void setProCap(String proCap) {
          this.proCap = proCap;
     }
}

3. 创建 DAO 类

首先在WEB-INF下的lib中导入JDBC所需要的jar包，用以连接数据库使用。

在dao包下新建 ProvinceDao 类，其中封装对于province表进行增删改查操作的JDBC代码

package dao;

import entity.province;

import java.sql.*;

public class ProvinceDAO {
     public province queryProvinceById(Integer provinceId) {
         Connection conn = null;
         PreparedStatement ps = null;
         ResultSet rs = null;
         String sql;
         String url = "jdbc:mysql://localhost:3306/mydatabase?serverTimezone=GMT";
         String username = "root";
         String password = "aszhuo123";
         province pro = null;
         try {
             Class.forName("com.mysql.cj.jdbc.Driver");
             conn = DriverManager.getConnection(url, username, password);
             sql = "select id, name, addr, proCap from province where id = ?";
             ps = conn.prepareStatement(sql);
             ps.setInt(1, provinceId);
             rs = ps.executeQuery();
             if (rs.next()) {
                 pro = new province();
                 pro.setId(rs.getInt("id"));
                 pro.setName(rs.getString("name"));
                 pro.setAddr(rs.getString("addr"));
                 pro.setProCap(rs.getString("proCap"));
             }
         } catch (ClassNotFoundException | SQLException e) {
             e.printStackTrace();
         } finally {
             try {
                 if (rs != null) {
                     rs.close();
                 }
                 if (conn != null) {
                     conn.close();
                 }
                 if (ps != null) {
                     ps.close();
                 }
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
         return pro;
     }
}

4. 创建Servlet类

在Servlet类中， 我们将根据ajax异步对象发来的携带省份ID proId 的请求，在此类中调用dao类获取新数据，然后在将获得的新数据重新发送给ajax对象。

在此期间我们重新发送新数据时，发送的是JSON格式字符串。为了简化代码，在此我们使用jackson工具包。我们找到jackson目录下的三个jar包，并将其jar包添加到lib目录下。

代码如下：

package controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.ProvinceDAO;
import entity.province;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;

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

@WebServlet(name = "QueryServlet", value = "/QueryServlet")
public class QueryServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "{}";
        String strProId = request.getParameter("proId");
        if (strProId != null && strProId.trim().length() > 0) {
            ProvinceDAO pDao = new ProvinceDAO();
            province p = pDao.queryProvinceById(Integer.valueOf(strProId));
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(p);

        }
        response.setContentType("application/json;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(json);//会赋值给ajax中的responseText属性
        pw.flush();
        pw.close();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

5. 创建JSP文件

创建test.jsp文件，先写包含省份编号、省份名称、省份简称及省会名称的主界面。如下图所示，在此我们要做的就
是实现输入省份编号之后，点击搜索，下面的省份名称、省份简称及省会名称相应的显现出来。在此我们要用到的xmlHttpRequest对象做异步请求，且省份编号这个文本框不用表单进行提交。

jsp文件代码如下

<%--
  Created by IntelliJ IDEA.
  User: 繁花fancy
  Date: 2021/11/18
  Time: 8:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>根据省份id来获取名称</title>
    <script>
        function search() {
            var xmlHttp = new XMLHttpRequest();//1. 创建异步对象
            //2. 绑定事件
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var data = xmlHttp.responseText;
                    var jsonObj = eval("(" + data + ")");//eval是执行括号中的代码，将json字符串转换为json对象

                    document.getElementById("proname").value = jsonObj.name;
                    document.getElementById("addr").value = jsonObj.addr;
                    document.getElementById("proCap").value = jsonObj.proCap;
                }
            }

            //3. 初始化异步请求
            var proId = document.getElementById("proId").value;
            xmlHttp.open("get", "QueryServlet?proId="+proId, true);
            //4. 发送文件
            xmlHttp.send();
        }

    </script>
</head>
<body>
      <p>根据省份Id获取省份名称</p>
      <table>
          <tr>
              <td>省份编号：</td>
              <td><input type="text" id="proId"/></td>
              <td><input type="button" value="搜索" onclick="search()"/></td>
          </tr>
          <tr>
              <td>省份名称：</td>
              <td><input type="text" id="proname"></td>
          </tr>
          <tr>
              <td>省份简称：</td>
              <td><input type="text" id="addr"></td>
          </tr>
          <tr>
              <td>省会名称：</td>
              <td><input type="text" id="proCap"></td>
          </tr>
      </table>
</body>
</html>

操作结果如图所示