【JavaWeb-Ajax】網站 --- 通過省份 id 獲取省份資訊（通過Ajax實現區域性重新整理）
阿新 • • 發佈：2022-03-25
網站實現功能：
- 通過輸入省份編號，應用 Ajax 向服務端（tomcat伺服器）傳送請求，在服務端從資料庫中取出對應資訊打回客戶端瀏覽器，區域性重新整理頁面，來獲取省份資訊（省份名稱，省份簡稱，省份的省會）。
網站結構：
網站預覽：
建表語句：
CREATE TABLE `pro` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `jiancheng` varchar(255) DEFAULT NULL, `shenghui` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ); INSERT INTO `pro` VALUES ('1','河北','冀','石家莊'); INSERT INTO `pro` VALUES ('2','山西','晉','太原市'); INSERT INTO `pro` VALUES ('3','內蒙古','蒙','呼和浩特市'); INSERT INTO `pro` VALUES ('4','遼寧','遼','瀋陽'); INSERT INTO `pro` VALUES ('5','江蘇','蘇','南京'); INSERT INTO `pro` VALUES ('6','浙江','浙','杭州'); INSERT INTO `pro` VALUES ('7','安徽','皖','合肥'); INSERT INTO `pro` VALUES ('8','福建','閩','福州'); INSERT INTO `pro` VALUES ('9','江西','贛','南昌');
index.jsp（網站歡迎資原始檔）：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <%--js程式碼--%> <script type="text/javascript"> //定義函式，用來將json中的“value”（省份名稱，簡稱，省份省會）輸出到對應的三個文字框中 function callBack(josn) { document.getElementById("provinceName").value = josn.provinceName; document.getElementById("provinceJianCheng").value = josn.jianCheng; document.getElementById("provinceShengHui").value = josn.shengHui; } function search() { //1、建立非同步物件 var xmlHttp = new XMLHttpRequest(); //2、繫結事件 xmlHttp.onreadystatechange = function () { //非同步物件把從服務端接受過來的資料處理完 且 網路請求成功 時，執行if內程式碼 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { //通過 xmlHttp.responseText 屬性來獲取服務端返回的資料 var data = xmlHttp.responseText; //eval函式，可以將字串轉換為json物件（不重要，不用細研究此函式） var josnObj = eval("(" + data + ")"); //呼叫callBack，將jsonObj中的幾個“value”寫入到對應文字框中 callBack(josnObj); } }; //3、初始非同步物件的請求引數 //獲取provinceId文字框的值 var provinceId = document.getElementById("provinceId").value; //傳送請求（將省份id引數送到服務端） xmlHttp.open("get", "queryProvinceMessage?provinceId=" + provinceId, true); //4、傳送請求 xmlHttp.send(); } </script> </head> <body> <p>通過省份ID來獲取省份資訊</p> <table> <tr> <td>省份編號：</td> <td> <input type="text" id="provinceId"> <input type="button" value="搜尋" onclick="search()"> </td> </tr> <tr> <td>省份名稱：</td> <td><input type="text" id="provinceName"></td> </tr> <tr> <td>省份簡稱：</td> <td><input type="text" id="provinceJianCheng"></td> </tr> <tr> <td>省會名稱：</td> <td><input type="text" id="provinceShengHui"></td> </tr> </table> </body> </html>
com.burnyouth.util.JdbcUtil（JDBC工具類）：
package com.burnyouth.util; import java.sql.*; public class JdbcUtil { static { try { Class.forName("com.mysql.cj.jdbc.Driver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } private JdbcUtil() { } public static Connection getConnection() throws SQLException { return DriverManager.getConnection("jdbc:mysql://localhost:3306/burning_youth" , "root", "888"); } public static void close(Connection connection, Statement statement, ResultSet resultSet) { if (resultSet != null) { try { resultSet.close(); } catch (SQLException e) { e.printStackTrace(); } } if (statement != null) { try { statement.close(); } catch (SQLException e) { e.printStackTrace(); } } if (connection != null) { try { connection.close(); } catch (SQLException e) { e.printStackTrace(); } } } }
com.burnyouth.entity.Province（省份實體類）：
package com.burnyouth.entity;
public class Province {
private Integer provinceId;
private String provinceName;
private String jianCheng;
private String shengHui;
public Province() {
}
public Province(Integer provinceId, String provinceName, String jianCheng, String shengHui) {
this.provinceId = provinceId;
this.provinceName = provinceName;
this.jianCheng = jianCheng;
this.shengHui = shengHui;
}
public Integer getProvinceId() {
return provinceId;
}
public void setProvinceId(Integer provinceId) {
this.provinceId = provinceId;
}
public String getProvinceName() {
return provinceName;
}
public void setProvinceName(String provinceName) {
this.provinceName = provinceName;
}
public String getJianCheng() {
return jianCheng;
}
public void setJianCheng(String jianCheng) {
this.jianCheng = jianCheng;
}
public String getShengHui() {
return shengHui;
}
public void setShengHui(String shengHui) {
this.shengHui = shengHui;
}
}
com.burnyouth.dao.ProvinceDao（連線資料庫，進行查詢操作並返回資料）：
package com.burnyouth.dao;
import com.burnyouth.entity.Province;
import com.burnyouth.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class ProvinceDao {
public ProvinceDao() {
}
/**
* 通過省份id來獲取省份資訊
* @param provinceId 省份id
* @return Province物件
*/
public Province queryProvinceById(Integer provinceId) {
Connection connection = null;
PreparedStatement ps = null;
ResultSet resultSet = null;
Province province = null;
try {
connection = JdbcUtil.getConnection();
String sql = "select * from pro where id=?";
ps = connection.prepareStatement(sql);
ps.setInt(1, provinceId);
resultSet = ps.executeQuery();
if (resultSet.next()) {
Integer id = resultSet.getInt("id");
String provinceName = resultSet.getString("name");
String jianCheng = resultSet.getString("jiancheng");
String shengHui = resultSet.getString("shenghui");
province = new Province(id, provinceName, jianCheng, shengHui);
}
} catch (SQLException var10) {
var10.printStackTrace();
} finally {
JdbcUtil.close(connection, ps, resultSet);
}
return province;
}
}
xml：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
version="5.0">
<servlet>
<servlet-name>QueryProvinceMessageServlet</servlet-name>
<servlet-class>com.burnyouth.controller.QueryProvinceMessageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryProvinceMessageServlet</servlet-name>
<url-pattern>/queryProvinceMessage</url-pattern>
</servlet-mapping>
</web-app>
com.burnyouth.controller.QueryProvinceMessageServlet（根據請求引數中的省份id，返回對應的 json 格式的省份資訊）：
package com.burnyouth.controller;
import com.burnyouth.dao.ProvinceDao;
import com.burnyouth.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryProvinceMessageServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String josn = "";
PrintWriter out = null;
ProvinceDao dao = new ProvinceDao();
//獲取省份id引數
String provinceId = req.getParameter("provinceId");
//當省份id不為null 且省份id不為空字串 時，執行if內程式碼
if (provinceId != null && provinceId.trim().length() > 0) {
//通過【dao】連線資料庫，獲取省份資訊，並返回具體的省份類
Province province = dao.queryProvinceById(Integer.valueOf(provinceId));
//將字串轉換為json格式的字串
ObjectMapper objectMapper = new ObjectMapper();
josn = objectMapper.writeValueAsString(province);
}
//使瀏覽器以正確的編譯器讀取返回的資訊
resp.setContentType("application/json;charset=utf-8");
//獲取輸出流
out = resp.getWriter();
//返回資訊
out.print(josn);
//重新整理通道
out.flush();
//關閉通道
out.close();
}
}