Web前端-Ajax-02-实例:根据省份id查询省份信息

Web前端-Ajax-02-实例:根据省份id查询省份信息

1.需求

用户在文本框输入省份的编号id，在其他文本框中显示其对应的省份名称、省份简称以及省会。

2.准备工作

2.1创建数据库与数据表

2.1.1创建数据库【db_ajax】

create database db_ajax;

2.1.2创建省份信息表【province】

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
    `simpleName` varchar(255) DEFAULT NULL COMMENT '简称',
    `proCap` varchar(255) DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');

2.1.3创建城市信息表【city】

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `city`;
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;

INSERT INTO `city` VALUES ('1', '石家庄市', '1');
INSERT INTO `city` VALUES ('2', '秦皇岛', '1');
INSERT INTO `city` VALUES ('3', '保定市', '1');
INSERT INTO `city` VALUES ('4', '张家口', '1');
INSERT INTO `city` VALUES ('5', '南昌市', '9');
INSERT INTO `city` VALUES ('6', '九江市', '9');
INSERT INTO `city` VALUES ('7', '宜春市', '9');
INSERT INTO `city` VALUES ('8', '福州市', '8');
INSERT INTO `city` VALUES ('9', '厦门市', '8');
INSERT INTO `city` VALUES ('10', '泉州市', '8');
INSERT INTO `city` VALUES ('11', '龙岩市', '8');
INSERT INTO `city` VALUES ('12', '太原', '2');
INSERT INTO `city` VALUES ('13', '大同', '2');
INSERT INTO `city` VALUES ('14', '呼和浩特', '3');
INSERT INTO `city` VALUES ('15', '包头', '3');
INSERT INTO `city` VALUES ('16', '呼伦贝尔', '3');

2.2创建Web工程

1.创建新的Module，选择Java Enterprise--->Web Application--->next

2.为Module命名

3.在/web/WEB-INF目录下新建lib文件夹，将数据库驱动、json工具包等jar包放进去

4.将lib目录下的jar包都添加到工程Library里

2.3创建省份信息表对应实体类

创建com.tsccg.entity.Province实体类

package com.tsccg.entity;

/**
 * @Author: TSCCG
 * @Date: 2021/08/29 14:30
 * 省份信息表province对应实体类
 */
public class Province {
    private Integer id;//省份编号
    private String name;//省份名称
    private String simpleName;//省份简称
    private String proCap;//省份的省会

    public Province() {
    }

    public Province(Integer id, String name, String simpleName, String proCap) {
        this.id = id;
        this.name = name;
        this.simpleName = simpleName;
        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 getSimpleName() {
        return simpleName;
    }

    public void setSimpleName(String simpleName) {
        this.simpleName = simpleName;
    }

    public String getProCap() {
        return proCap;
    }

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

2.4封装JDBC工具类

配置文件：jdbc.properties

driverName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db_ajax
user=root
password=123456

工具类：JdbcUtil.java

package com.tsccg.util;

import java.sql.*;
import java.util.ResourceBundle;

/**
 * @Author: TSCCG
 * @Date: 2021/08/28 19:42
 * 封装工具类
 */
public class JdbcUtil {
    private static Connection conn = null;
    private static PreparedStatement ps = null;
    private static Statement stmt = null;

    private static String url = null;
    private static String user = null;
    private static String password = null;

    /**
     * 静态代码块，用于注册驱动及初始化各种参数
     */
    static {
        try {
            ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
            String driverName = bundle.getString("driverName");
            url = bundle.getString("url");
            user = bundle.getString("user");
            password = bundle.getString("password");
            //注册驱动
            Class.forName(driverName);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取连接
     * @return 返回Connection对象
     */
    public static Connection getConn() {
        try {
            conn = DriverManager.getConnection(url,user,password);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return conn;
    }

    /**
     * 获取预编译的数据库操作对象
     * @param sql sql语句
     * @return 返回PreparedStatement对象
     */
    public static PreparedStatement getPs(String sql) {
        try {
            ps = getConn().prepareStatement(sql);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return ps;
    }

    /**
     * 获取数据库操作对象
     * @return 返回Statement对象
     */
    public static Statement getStmt() {
        try {
            stmt = getConn().createStatement();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return stmt;
    }

    /**
     * 关闭所有
     * @param rs 查询结果集对象
     */
    public static void closeAll(ResultSet rs) {
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (stmt != null) {
            try {
                stmt.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}

3.流程说明

1. 首先创建一个页面【index.jsp】，使用ajax调用异步对象，携带省份id发送请求，访问SearchServlet
2. 创建【ProDao】类用于将sql语句推送给数据库服务器，返回处理结果
   1. 创建查询方法【search()】，根据省份id查询出对应的省份信息
   2. 将省份信息写入省份信息表实体类对象，
   3. 返回实体类对象
3. 创建【SearchServlet】处理请求
   1. 调用请求对象获取请求头中的省份id
   2. 调用ProDao类的search()方法，得到省份信息实体类对象
   3. 使用json工具包将实体类对象转换为json格式字符串
   4. 将json格式字符串写入响应体，发送回异步对象
4. index.jsp中的异步对象接收到json格式字符串
   1. 调用eval()函数将json格式字符串转换为json对象
   2. 根据json对象信息更新页面中相应DOM对象数据

4.创建用户交互页面

在自动创建的index.jsp中编写代码。

1. 编写基本页面标签
2. 使用Ajax

   1. 发送请求

      • 调用异步对象向服务器发起请求，携带省份id发送请求，访问SearchServlet

   2. 接收响应数据

      • 调用eval()函数将发送回来的json格式字符串转换为json对象
      • 根据json对象信息更新页面中相应DOM对象数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>查询省份信息</title>
  </head>
  <script type="text/javascript">
      function search() {
          //1.创建异步对象
          var xmlHttp = new XMLHttpRequest();
          //2.绑定onreadystatechange事件
          xmlHttp.onreadystatechange = function() {
              if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                  //获取响应数据
                  var jsonStr = xmlHttp.responseText;
                  //将json格式字符串转换为json对象
                  var jsonObj = eval("(" + jsonStr + ")");
                  //更新DOM对象
                  document.getElementById("name").value = jsonObj.name;
                  document.getElementById("simpleName").value = jsonObj.simpleName;
                  document.getElementById("proCap").value = jsonObj.proCap;
              }
          }
          //3.初始化异步对象
          var id = document.getElementById("id").value;
          var param = "id=" + id;
          xmlHttp.open("get","search?" + param,true);
          //4.发送请求
          xmlHttp.send();
      }
  </script>
  <body>
  <center>
      <table>
          <tr>
              <td>省份编号：</td>
              <td>
                    <input type="text" id="id">
                    <input type="button" value="查询" onclick="search()">
              </td>
            </tr>
          <tr>
              <td>省份名称：</td>
              <td>
                    <input type="text" id="name" readonly>
              </td>
          </tr>
          <tr>
              <td>简&nbsp;&nbsp;称：</td>
              <td>
                  <input type="text" id="simpleName" readonly>
              </td>
          </tr>
          <tr>
              <td>省&nbsp;&nbsp;会：</td>
              <td>
                  <input type="text" id="proCap" readonly>
              </td>
          </tr>
    </table>
  </center>
  </body>
</html>

5.编写Dao类【ProDao】

1. 创建查询方法【search()】，根据省份id查询出对应的省份信息
2. 将省份信息写入省份信息表实体类对象，
3. 返回实体类对象

package com.tsccg.dao;

import com.tsccg.entity.Province;
import com.tsccg.util.JdbcUtil;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * @Author: TSCCG
 * @Date: 2021/08/28 21:24
 */
public class ProDao {
    /**
     * 根据省份id获取省份信息
     * @param id 省份id
     * @return 省份id对应的所有省份信息
     */
    public Province search(Integer id) {
        Province pro = null;
        ResultSet rs = null;
        String sql = "select * from province where id = ?";
        PreparedStatement ps = JdbcUtil.getPs(sql);
        try {
            ps.setInt(1,id);
            rs = ps.executeQuery();
            while (rs.next()) {
                String name = rs.getString("name");
                String simpleName = rs.getString("simpleName");
                String proCap = rs.getString("proCap");
                pro = new Province(id,name,simpleName,proCap);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            JdbcUtil.closeAll(rs);
        }
        return pro;
    }
}

6.创建Servlet用于处理请求

创建com.tsccg.controller.SearchServlet，别称：search

1. 调用请求对象获取请求头中的省份id
2. 调用ProDao类的search()方法，得到省份信息实体类对象
3. 使用json工具包将实体类对象转换为json格式字符串
4. 将json格式字符串写入响应体，发送回异步对象

package com.tsccg.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tsccg.dao.ProDao;
import com.tsccg.entity.Province;

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;

/**
 * @Author: TSCCG
 * @Date: 2021/08/28 23:31
 * 处理查询省份信息请求
 */
public class SearchServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Province pro = new Province();
        String jsonStr = "{}";//定义json字符串，如果没查到信息，返回空json字符串
        //1.调用请求对象获取请求头中的请求参数【省份id】
        String proId = request.getParameter("id");
        //2.调用Dao类将sql查询命令推送到数据库服务器，返回查询结果，将其转换为JSON格式字符串
        if (proId != null && proId.trim().length() > 0) {
            ProDao dao = new ProDao();
            pro = dao.search(Integer.parseInt(proId));
        }
        //将省份对象转换为json格式字符串
        ObjectMapper mapper = new ObjectMapper();
        jsonStr = mapper.writeValueAsString(pro);
        //3.调用响应对象将查询结果写入响应体，推送回异步对象
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonStr);//将查询结果写入响应体
        out.flush();//清除缓存
        out.close();//关闭输出流
    }
}

7.测试

发布网站，开启服务器。