使用Ajax访问数据库并实现局部更新
- 1、项目清单
- 2、代码
- 1 、index.jsp代码
- 3、ProvinceDao类代码
- 3、QueryProviceServlet代码
- 4、web.xml代码
- 3、数据库
- city表
- 创建city表的sql代码
- province表
- 创建province表的sql代码
- 4、笔记
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>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;
}
}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、数据库
city表
创建city表的sql代码
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');province表
创建province表的sql代码
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 '省份名称',
`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
`shenghui` 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', '江西', '赣', '南昌');4、笔记
- 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对象的数据，至此在文本框中完成数据的输出。
- entity包下的东西本题用不着，可不用实现。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
