1、项目清单

2、代码

1 、index.jsp代码

在这里插入代码片<%--Created by IntelliJ IDEA.User: 福仔Date: 2022/2/26Time: 17:09To 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);//创建PreparedStatementsql="select  name from province where id=?";pst = conn.prepareStatement(sql);//设置参数值pst.setInt(1,proviceId);//执行sqlrs = 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 {@Overrideprotected 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-8resp.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包下的东西本题用不着，可不用实现。

Ajax---根据id从数据库查找对应的省份名称相关推荐

在登录页面中js进行正则验证电话号码和邮箱地址，并使用ajax进行用户ID的数据库验证
本文说的是在登录页面中使用js进行正则验证并使用ajax进行用户ID的数据库验证,另外也加入键盘监听. 先看一下登录的jsp页面代码 <%@ page language="java&q ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
php ajax操作数据库,php + ajax 实现的写入数据库操作简单示例
本文实例讲述了php+ ajax 实现的写入数据库操作.分享给大家供大家参考,具体如下: 这个是最简单的表单提交延伸:后面有很多需要提交的信息如何快速部署接口此例子是移动端H5页面,使用的是z ...
ajax刷新数据库数据,ajax删除数据刷新数据库
ajax删除数据刷新数据库内容精选换一换 DWS数据连接创建完成后,用户可以在右侧区域中管理DWS数据连接的数据库模式.已新建DWS数据连接,请参见新建数据连接.已新建DWS数据库,请参见新建数据 ...
jq获取id的名称_查找 Linux 发行版名称、版本和内核详细信息 | Linux 中国
我这里给出了一些命令行方法来查找 Linux 系统信息.可能有很多,但这些方法适用于大多数 Linux 发行版.-- Sk 本指南介绍了如何查找 Linux 发行版名称.版本和内核详细信息.如果你的 ...
ajax添加和删除数据,ajax 添加更新删除数据库
ajax 添加更新删除数据库内容精选换一换云审计服务(Cloud Trace Service,CTS)记录了数据安全中心相关的操作事件,方便用户日后的查询.审计和回溯,具体请参见云审计服务用 ...
swagger查的id和数据库不一致
一.情景再现使用swagger查出来的数据的id和数据库里数据的id后几位不一样.但是使用postman查出来的数据跟数据库一致. swagger显示数据: 数据库数据: 二.问题分析数据的id ...
springboot-mybatis数据库字段和实体字段名称不一致，查询值为null
springboot-mybatis数据库字段和实体字段名称不一致,查询值为null 一.问题和原因二.我的解决,总结参考了:https://www.cnblogs.com/yif0118/p/14 ...

Ajax---根据id从数据库查找对应的省份名称

使用Ajax访问数据库并实现局部更新

1、项目清单

2、代码

1 、index.jsp代码

3、ProvinceDao类代码

3、QueryProviceServlet代码

4、web.xml代码

3、数据库

city表

创建city表的sql代码

province表

创建province表的sql代码

4、笔记

Ajax---根据id从数据库查找对应的省份名称相关推荐

最新文章

热门文章