使用Ajax访问数据库并实现局部更新
1、项目清单
2、代码
1 、index.jsp代码
在这里插入代码片<%--
Created by IntelliJ IDEA.
User: 福仔
Date: 2022/2/26
Time: 17:09
To change this template use File | Settings | File Templates.
--%>
<%@ 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 () {
if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
//alert(xmlHttp.responseText)
//更新页面，就是更新dom对象
document.getElementById("proname").value= xmlHttp.responseText;
}
}
//3.初始异步对象
//获取proid文本框的值
var proid = document.getElementById("proid").value;
xmlHttp.open("get","queryProvice?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="button" value="搜索" onclick="search()"/>
</td>
</tr>
<tr>
<td>省份名称</td>
<td><input type="text" id="proname"/></td>
</tr>
</table>
</body>
<a href="html/main.jsp">link</a>
</html>
2、Province代码
package com.bjpowernode.entity;
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
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 getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
}
3、ProvinceDao类代码
package com.bjpowernode.dao;
import com.bjpowernode.entity.Province;
import java.sql.*;
//使用jdbc访问数据库
public class ProvinceDao {
//根据id获取名称
public String queryProviceNameById(Integer proviceId){
//声明变量
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql= "";
//定义参数
String url="jdbc:mysql://localhost:3306/springdb";
String username="root";
String password="123456";
//连接数据库
String name = "";
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
//创建PreparedStatement
sql="select name from province where id=?";
pst = conn.prepareStatement(sql);
//设置参数值
pst.setInt(1,proviceId);
//执行sql
rs = pst.executeQuery();
//遍历rs
/*while(rs.next()){ //当你的rs中有多余一条记录时。
name = rs.getString("name");
}*/
if( rs.next()){
name =rs.getString("name");
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
try{
if( rs != null){
rs.close();
}
if( pst != null){
pst.close();
}
if( conn != null){
conn.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
return name;
}
//根据id获取一个完整的Province对象
public Province queryProviceById(Integer proviceId){
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql= "";
String url="jdbc:mysql://localhost:3306/springdb";
String username="root";
String password="123456";
Province province = null;
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
//创建PreparedStatement
sql="select id, name, jiancheng, shenghui from province where id=?";
pst = conn.prepareStatement(sql);
//设置参数值
pst.setInt(1,proviceId);
//执行sql
rs = pst.executeQuery();
//遍历rs
/*while(rs.next()){ //当你的rs中有多余一条记录时。
name = rs.getString("name");
}*/
if( rs.next()){
province = new Province();
province.setId( rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
try{
if( rs != null){
rs.close();
}
if( pst != null){
pst.close();
}
if( conn != null){
conn.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
return province;
}
}
3、QueryProviceServlet代码
package com.bjpowernode.controller;
import com.bjpowernode.dao.ProvinceDao;
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;
public class QueryProviceServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
//处理get请求
String strProid = req.getParameter("proid");
System.out.println("strProid:"+ strProid);
String name = "默认是无数据";
//访问dao，查询数据库
if( strProid != null && !"".equals(strProid.trim()) ){
//创建dao对象，调用它的方法
ProvinceDao dao = new ProvinceDao();
name = dao.queryProviceNameById( Integer.valueOf(strProid));
}
//使用HttpServletResponse输出数据
// servlet返回给浏览器的是 文本数据， 数据的编码是utf-8
resp.setContentType("text/html;charset=utf-8");
PrintWriter pw = resp.getWriter();
//pw.println("中国");
pw.println(name);
pw.flush();
pw.close();
}
}
4、web.xml代码
<?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>
<servlet-name>QueryProvice</servlet-name>
<servlet-class>com.bjpowernode.controller.QueryProviceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryProvice</servlet-name>
<url-pattern>/queryProvice</url-pattern>
</servlet-mapping>
</web-app>
3、笔记
- QueryProviceServlet通过extends HttpServlet让其变成Servlet文件，每建立一个Servlet文件需要在web.xml中配置一下。
- index.jsp创建异步对象调用open传参到QueryProviceServlet中，QueryProviceServlet得到参数后创建ProvinceDao对象，然后调用它的方法queryProviceNameById（）来驱动ProvinceDao类去建立数据库连接并访问数据库获取相应的值，queryProviceNameById（）方法返回name,QueryProviceServlet得到name后使用HttpServletResponse输出数据，index.jsp通过异步对象的xmlHttp.responseText得到的数据后再去更新dom对象的数据，至此在文本框中完成数据的输出。