ajax-210810-05---练习&局部刷新-从数据库中获取数据

ajax-210810-05—练习&局部刷新-从数据库中获取数据

• index.jsp（主页面）
• ProviceDao.java（dao层，从数据库中获取数据）
• QueryProviceServlet.java（调用dao层，把数据响应给页面）
• web.xml（servlet映射）
• 结果展示

---

index.jsp（主页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax---根据省份id获取名称</title>
    <script type="text/javascript">

        function search(){
            // 1. 创建异步对象
            var xmlHttp = new XMLHttpRequest();

            // 2. 绑定事件
            xmlHttp.onreadystatechange = function (){
                // alert(xmlHttp.readyState);
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // alert(xmlHttp.responseText);

                    document.getElementById("proname").value = xmlHttp.responseText;
                    // var proName = xmlHttp.responseText;
                    // document.getElementById("proname").value = proName;
                }
            }

            // 3. 初始化对象
            var proId = document.getElementById("proid").value;
            xmlHttp.open("get","queryProviceServlet?proId="+proId,true);

            // 4. 发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<p>ajax---根据省份id获取名称</p>
<table>
    <tr>
        <td>
            省份编号：
        </td>
        <td>
            <input type="text" id="proid"/>
            <input type="submit" value="查找" οnclick="search()"/>
        </td>
    </tr>
    <tr>
        <td>
            省份名称：
        </td>
        <td>
            <input type="text" id="proname"/>
        </td>
    </tr>
</table>
</body>
</html>

---

ProviceDao.java（dao层，从数据库中获取数据）

package com.bgy.dao;

import java.sql.*;

public class ProviceDao {

    // 根据id获取名称
    public String queryProviceNameById(Integer proviceID){

        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs = null;

        String sql = "";
        String url = "jdbc:mysql://localhost:3306/springdb?&useSSL=false&serverTimezone=UTC";
        String username = "root";
        String password = "admin";

        String name = "";
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);

            sql = "select name from province where id=?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1,proviceID);

            rs = pst.executeQuery();

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

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

        return name;
    }
}

---

QueryProviceServlet.java（调用dao层，把数据响应给页面）

package com.bgy.controller;

import com.bgy.dao.ProviceDao;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class QueryProviceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response) throws ServletException, IOException {

        String name = "";

        // 处理get请求
        String strProId = request.getParameter("proId");
        System.out.println("响应了ajax请求");
        System.out.println("strProId ---> " + strProId);

        // 调用dao
        if (strProId != null && !"".equals(strProId.trim())) {
            ProviceDao dao = new ProviceDao();
            name = dao.queryProviceNameById(Integer.valueOf(strProId));
        }

        System.out.println(name);

        // 响应数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.print(name);
        writer.flush();
        writer.close();
    }
}

---

web.xml（servlet映射）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>QueryProviceServlet</servlet-name>
        <servlet-class>com.bgy.controller.QueryProviceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryProviceServlet</servlet-name>
        <url-pattern>/queryProviceServlet</url-pattern>
    </servlet-mapping>
</web-app>

---

结果展示

输入编号，点击查找，就会在省份名称框显示。

结果展示

输入编号，点击查找，就会在省份名称框显示。

[外链图片转存中…(img-lPrSpy0E-1628603439614)]