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)]