Web前端-Ajax-02-实例:根据省份id查询省份信息
2024-06-04 09:25:18
Web前端-Ajax-02-实例:根据省份id查询省份信息
1.需求
用户在文本框输入省份的编号id，在其他文本框中显示其对应的省份名称、省份简称以及省会。
2.准备工作
2.1创建数据库与数据表
2.1.1创建数据库【db_ajax】
create database db_ajax;
2.1.2创建省份信息表【province】
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 '省份名称',`simpleName` varchar(255) DEFAULT NULL COMMENT '简称',`proCap` 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', '江西', '赣', '南昌');2.1.3创建城市信息表【city】
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');
2.2创建Web工程
1.创建新的Module，选择Java Enterprise—>Web Application—>next
2.为Module命名
3.在/web/WEB-INF目录下新建lib文件夹，将数据库驱动、json工具包等jar包放进去
4.将lib目录下的jar包都添加到工程Library里
2.3创建省份信息表对应实体类
创建com.tsccg.entity.Province实体类
package com.tsccg.entity;/*** @Author: TSCCG* @Date: 2021/08/29 14:30* 省份信息表province对应实体类*/
public class Province {private Integer id;//省份编号private String name;//省份名称private String simpleName;//省份简称private String proCap;//省份的省会public Province() {}public Province(Integer id, String name, String simpleName, String proCap) {this.id = id;this.name = name;this.simpleName = simpleName;this.proCap = proCap;}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 getSimpleName() {return simpleName;}public void setSimpleName(String simpleName) {this.simpleName = simpleName;}public String getProCap() {return proCap;}public void setProCap(String proCap) {this.proCap = proCap;}
}
2.4封装JDBC工具类
配置文件：jdbc.properties
driverName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db_ajax
user=root
password=123456
工具类：JdbcUtil.java
package com.tsccg.util;import java.sql.*;
import java.util.ResourceBundle;/*** @Author: TSCCG* @Date: 2021/08/28 19:42* 封装工具类*/
public class JdbcUtil {private static Connection conn = null;private static PreparedStatement ps = null;private static Statement stmt = null;private static String url = null;private static String user = null;private static String password = null;/*** 静态代码块，用于注册驱动及初始化各种参数*/static {try {ResourceBundle bundle = ResourceBundle.getBundle("jdbc");String driverName = bundle.getString("driverName");url = bundle.getString("url");user = bundle.getString("user");password = bundle.getString("password");//注册驱动Class.forName(driverName);} catch (ClassNotFoundException e) {e.printStackTrace();}}/*** 获取连接* @return 返回Connection对象*/public static Connection getConn() {try {conn = DriverManager.getConnection(url,user,password);} catch (SQLException throwables) {throwables.printStackTrace();}return conn;}/*** 获取预编译的数据库操作对象* @param sql sql语句* @return 返回PreparedStatement对象*/public static PreparedStatement getPs(String sql) {try {ps = getConn().prepareStatement(sql);} catch (SQLException throwables) {throwables.printStackTrace();}return ps;}/*** 获取数据库操作对象* @return 返回Statement对象*/public static Statement getStmt() {try {stmt = getConn().createStatement();} catch (SQLException throwables) {throwables.printStackTrace();}return stmt;}/*** 关闭所有* @param rs 查询结果集对象*/public static void closeAll(ResultSet rs) {if (rs != null) {try {rs.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if (stmt != null) {try {stmt.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if (ps != null) {try {ps.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if (conn != null) {try {conn.close();} catch (SQLException throwables) {throwables.printStackTrace();}}}
}
3.流程说明
- 首先创建一个页面【index.jsp】，使用ajax调用异步对象，携带省份id发送请求，访问SearchServlet
- 创建【ProDao】类用于将sql语句推送给数据库服务器，返回处理结果
- 创建查询方法【search()】，根据省份id查询出对应的省份信息
- 将省份信息写入省份信息表实体类对象，
- 返回实体类对象
- 创建【SearchServlet】处理请求
- 调用请求对象获取请求头中的省份id
- 调用ProDao类的search()方法，得到省份信息实体类对象
- 使用json工具包将实体类对象转换为json格式字符串
- 将json格式字符串写入响应体，发送回异步对象
- index.jsp中的异步对象接收到json格式字符串
- 调用eval()函数将json格式字符串转换为json对象
- 根据json对象信息更新页面中相应DOM对象数据
4.创建用户交互页面
在自动创建的index.jsp中编写代码。
- 编写基本页面标签
- 使用Ajax
发送请求
- 调用异步对象向服务器发起请求，携带省份id发送请求，访问SearchServlet
接收响应数据
- 调用eval()函数将发送回来的json格式字符串转换为json对象
- 根据json对象信息更新页面中相应DOM对象数据
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>查询省份信息</title></head><script type="text/javascript">function search() {//1.创建异步对象var xmlHttp = new XMLHttpRequest();//2.绑定onreadystatechange事件xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {//获取响应数据var jsonStr = xmlHttp.responseText;//将json格式字符串转换为json对象var jsonObj = eval("(" + jsonStr + ")");//更新DOM对象document.getElementById("name").value = jsonObj.name;document.getElementById("simpleName").value = jsonObj.simpleName;document.getElementById("proCap").value = jsonObj.proCap;}}//3.初始化异步对象var id = document.getElementById("id").value;var param = "id=" + id;xmlHttp.open("get","search?" + param,true);//4.发送请求xmlHttp.send();}</script><body><center><table><tr><td>省份编号：</td><td><input type="text" id="id"><input type="button" value="查询" οnclick="search()"></td></tr><tr><td>省份名称：</td><td><input type="text" id="name" readonly></td></tr><tr><td>简 称：</td><td><input type="text" id="simpleName" readonly></td></tr><tr><td>省 会：</td><td><input type="text" id="proCap" readonly></td></tr></table></center></body>
</html>
5.编写Dao类【ProDao】
- 创建查询方法【search()】，根据省份id查询出对应的省份信息
- 将省份信息写入省份信息表实体类对象，
- 返回实体类对象
package com.tsccg.dao;import com.tsccg.entity.Province;
import com.tsccg.util.JdbcUtil;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;/*** @Author: TSCCG* @Date: 2021/08/28 21:24*/
public class ProDao {/*** 根据省份id获取省份信息* @param id 省份id* @return 省份id对应的所有省份信息*/public Province search(Integer id) {Province pro = null;ResultSet rs = null;String sql = "select * from province where id = ?";PreparedStatement ps = JdbcUtil.getPs(sql);try {ps.setInt(1,id);rs = ps.executeQuery();while (rs.next()) {String name = rs.getString("name");String simpleName = rs.getString("simpleName");String proCap = rs.getString("proCap");pro = new Province(id,name,simpleName,proCap);}} catch (SQLException throwables) {throwables.printStackTrace();} finally {JdbcUtil.closeAll(rs);}return pro;}
}6.创建Servlet用于处理请求
创建com.tsccg.controller.SearchServlet，别称：search
- 调用请求对象获取请求头中的省份id
- 调用ProDao类的search()方法，得到省份信息实体类对象
- 使用json工具包将实体类对象转换为json格式字符串
- 将json格式字符串写入响应体，发送回异步对象
package com.tsccg.controller;import com.fasterxml.jackson.databind.ObjectMapper;
import com.tsccg.dao.ProDao;
import com.tsccg.entity.Province;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;/*** @Author: TSCCG* @Date: 2021/08/28 23:31* 处理查询省份信息请求*/
public class SearchServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Province pro = new Province();String jsonStr = "{}";//定义json字符串，如果没查到信息，返回空json字符串//1.调用请求对象获取请求头中的请求参数【省份id】String proId = request.getParameter("id");//2.调用Dao类将sql查询命令推送到数据库服务器，返回查询结果，将其转换为JSON格式字符串if (proId != null && proId.trim().length() > 0) {ProDao dao = new ProDao();pro = dao.search(Integer.parseInt(proId));}//将省份对象转换为json格式字符串ObjectMapper mapper = new ObjectMapper();jsonStr = mapper.writeValueAsString(pro);//3.调用响应对象将查询结果写入响应体，推送回异步对象response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.print(jsonStr);//将查询结果写入响应体out.flush();//清除缓存out.close();//关闭输出流}
}7.测试
发布网站，开启服务器。
Web前端-Ajax-02-实例:根据省份id查询省份信息相关推荐
- Excel VBA实例39 - 一键批量查询基金信息、基金净值
大家好,我是永恒君! 最近和朋友交流了一下投资理财的信息,都谈到会想要配置部分基金,那首先自然是要了解一下基金的基本情况. 大部分的朋友查询基金的信息,都会在东方财富网上面进行查看,信息非常的全面. ...
- web前端框架开发实例，html5元素大全
对于很多没有学历优势的人来说,面试大厂是非常困难的,大多数的人毕业只找到一个名不经传的小公司过着三点一线的生活,我也是一样,直到生活上的变故,才让我有了新的想法和目标,因此我这个二本渣渣也奋斗了起来, ...
- 第三阶段：Web前端：02数据库(sql语言、JDBC数据库连接) | 03(1)SpringBoot
二.数据库--> MySQl或MariaDB 0.1.Mysql-安装步骤 进入网址 http://doc.canglaoshi.org/-->常用下载:Windows必备-->Ma ...
- Web前端-Ajax（下）
目录 1 jQuery库的初次封装 1.1 根据id获取元素 1.2 封装window.load 1.3 封装click和html函数 1.4 封装val方法 1.5 将jQuery文件单独放在js目 ...
- web前端——Ajax、http、git、npm、webpack、axios
Ajax 局部刷新,异步对象XMLHttpRequest http和https 1.基本工作原理 HTTP是浏览器或者其他客户端(如手机App)和网站服务器之间沟通的协议. 浏览器作为HTTP客户端通 ...
- web前端编程实战实例：制作静态京东首页
<!DOCTYPE html> <html> <head><title>京东_曾柯伟</title><link rel="s ...
- HTML5前端期末大作业 html css javascript防锤子手机商城官网 web前端网页设计实例 企业网站制作
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）
- 【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）...
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
最新文章
- 当你 ping 的时候，你知道背后发生了什么吗？
- SAP 对HU做转库操作，系统报错 - 系统状态HUAS是活动的 - 分析
- SharePoint 2010 与 SQL Server 2012 报表服务集成
- [原创].NET 分布式架构开发实战五 Framework改进篇
- java获取环境路径方法_JAVA获取服务器路径的方法
- 让电流检测更精确的AMR技术
- 【AI视野·今日CV 计算机视觉论文速览 第214期】Mon, 7 Jun 2021
- 【git】git 使用 Submodule 管理子模块 报错 pathspec did not match any files
- 【运维安全】-MySQL手工注入
- 【论文写作】网上办公自动系统中功能需求如何写
- javascript教程现有Web App模式的问题以及挑战
- 注意Stream.Seek,如果想要重复使用Stream,注意用Seek复位
- 会员卡管理系统从哪些方面解决门店会员营销困扰？
- vtuber面部捕捉工具_如何做一名VTuber？一个VUP就足够
- 新猿木子李：0基础学python培训教程 Python操作Excel之写入数据
- Cree捐赠350万美元支持纽约理工学院的STEM教育项目，帮助培训未来的高科技劳动力
- 为什么现在更多需要用的是 GPU 而不是 CPU，比如挖矿甚至破解密码？
- 绕过 word 文档的密码，对加密文档
- java ee7权威指南 卷1,JavaEE7权威指南，卷1（原书第5版）中文pdf
- OJB和Hibernate框架的评议一