Web前端-Ajax-02-实例:根据省份id查询省份信息

最新推荐文章于 2022-07-21 15:18:44 发布
最新推荐文章于 2022-07-21 15:18:44 发布
阅读量881 收藏 3
点赞数 1
分类专栏： Web前端 文章标签： ajax 数据库 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TSCCG/article/details/119975513
版权

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.流程说明

  1. 首先创建一个页面【index.jsp】，使用ajax调用异步对象，携带省份id发送请求，访问SearchServlet
  2. 创建【ProDao】类用于将sql语句推送给数据库服务器，返回处理结果
    1. 创建查询方法【search()】，根据省份id查询出对应的省份信息
    2. 将省份信息写入省份信息表实体类对象，
    3. 返回实体类对象
  3. 创建【SearchServlet】处理请求
    1. 调用请求对象获取请求头中的省份id
    2. 调用ProDao类的search()方法，得到省份信息实体类对象
    3. 使用json工具包将实体类对象转换为json格式字符串
    4. 将json格式字符串写入响应体，发送回异步对象
  4. index.jsp中的异步对象接收到json格式字符串
    1. 调用eval()函数将json格式字符串转换为json对象
    2. 根据json对象信息更新页面中相应DOM对象数据

4.创建用户交互页面

在自动创建的index.jsp中编写代码。

  1. 编写基本页面标签
  2. 使用Ajax

    1. 发送请求

      • 调用异步对象向服务器发起请求，携带省份id发送请求，访问SearchServlet

    2. 接收响应数据

      • 调用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>简&nbsp;&nbsp;称：</td>
              <td>
                  <input type="text" id="simpleName" readonly>
              </td>
          </tr>
          <tr>
              <td>省&nbsp;&nbsp;会：</td>
              <td>
                  <input type="text" id="proCap" readonly>
              </td>
          </tr>
    </table>
  </center>
  </body>
</html>

5.编写Dao类【ProDao】

  1. 创建查询方法【search()】，根据省份id查询出对应的省份信息
  2. 将省份信息写入省份信息表实体类对象，
  3. 返回实体类对象
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

  1. 调用请求对象获取请求头中的省份id
  2. 调用ProDao类的search()方法，得到省份信息实体类对象
  3. 使用json工具包将实体类对象转换为json格式字符串
  4. 将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 {
    @Override
    protected 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.测试

发布网站，开启服务器。

TSCCG
关注
专栏目录
《前端》jQuery-ajax例子
BelleDiao的博客
03-19 445
前面有jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715 例1：将接口中的result字段绘制成表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
Web前端学习笔记，详细的Web前端学习路线图
qq_43311315的博客
11-21 966
前端就是后台实现和视觉表现的桥梁，是贯穿在整个产品开发过程的纽带，起到承上启下的作用，一个好的前端工程师他能够很好理解产品经理对用户体验的要求，也能够很好地理解后台工程师对数据逻辑，或者程序逻辑进行分离的要求，并将这些要求转化成前台的开发工作。前端就是网站的门面，它的价值远大于 其他的客户端开发。在移动互联网时代，相信我们每个人的手机上都装有数十个APP，这些APP的开发其实也和当下热门的Web前...
js所有省份对应城市code列表（精确到县）
12-09
110000: '北京市', 120000: '天津市', 130000: '河北省', 140000: '山西省',
AJAX学习(三) --------- 根据省份ID来查询省份名称(项目实例)
在森林里麋了鹿
11-18 1021
目录前言实现步骤1. 将 city.sql 与 province.sql 导入数据库中2. 创建实体类3. 创建 DAO 类 前言 需求：用户在文本框架输入省份的编号 id，在其他文本框显示省份名称 项目准备： (1) 数据库表： 省份信息表 CREATE TABLE province ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) DEFAULT NULL COMMENT '省份名称', abbr varchar(255)
ajax coap_Ajax实现三级联动省市查询
weixin_39954487的博客
11-09 121
Ajax之三级联动效果图需求分析页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框选择省，则市下拉框中出现对应的省的下拉的市的信息，选择市，则区/县下拉框中出现对应的数据技术分析核心：ajax+数据库操作需求分析1.创建页面：页面中有三个下拉框，分别为省、市、区/县2.页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省的下拉框中3.选择省触发一个新的js函数的执行，该函数...
网页JS获取当前地理位置（省市区）
weixin_34349320的博客
12-17 936
　　眼看2014又要过去了，翻翻今年的文章好像没有写几篇，忙真的或许已经不能成为借口了，在忙时间还是有的，就像海绵里的水挤挤总会有滴。真真的原因是没有学习过什么新的技术，工作过程中遇到的问题也不是非常难并且自己认为是没有什么可以记录分享的，大部分都是温习以前的技术，现在已经专门负责前端技术，发现这边的水还是非常深，技术太多了，想学真的一时半会儿学不完。 　　今年的项目开发中，初步接触了移动端WE...
使用ajax实现分类查询,使用 AJAX + 三级联动 实现分类出全国各地的省，市，区...
weixin_34129429的博客
08-06 281
$(document).ready(function(e) {//在div里造下拉菜单$("#sj").html("");//填充数据 使用Fill 关键字FillSheng(); //填充省的数据FillShi(); //填充市的数据FillQu(); //填充区的数据//填充省的方法function FillSheng(){var code = "0001"; //省的...
Web前端Ajax&JQuery视频教程课件
12-17
【Ajax和jQuery简介】 Ajax（Asynchronous ...总的来说，Ajax和jQuery为Web开发提供了强大的工具，让前端交互更加流畅，用户体验更佳。通过熟练掌握这些技术，开发者能够构建出更高效、更动态的Web应用程序。
无刷新实现国家省份城市选择下拉框列表-（ajax的应用）
08-13
例如，当用户从国家下拉框中选择一个国家后，AJAX 请求会被触发，服务器查询数据库获取对应国家的所有省份，然后返回这些省份的列表，最后在前端更新省份下拉框。 总结来说，这个例子展示了 AJAX 如何实现动态更新...
Ajax---根据id从数据库查找对应的省份名称
福仔的博客
02-27 1504
使用Ajax的异步对象来根据id访问数据库并输出对应的name
propinsi-codeigniter:用ajax技术显示区域数据
07-22
在“propinsi-codeigniter”项目中，我们看到的是如何利用AJAX和jQuery技术来动态地展示印度尼西亚的区域数据，包括省份、区、街道和村庄的信息。这个例子展示了Web开发中的前后端交互，使得用户无需刷新页面就能...
php获取城市的名称,php 根据城市名找到省份名称的方法
weixin_29722785的博客
03-11 580
采集遇到没有省份只有城市问题；采用城市名找到省份名称的方法：$allcitys = array(array("北京"),array("上海"),array("天津"),array("重庆"),array("哈尔滨", "齐齐哈尔", "牡丹江", "大庆", "伊春", "双鸭山", "鹤岗", "鸡西", "佳木斯", "七台河", "黑河", "绥化", "大兴安岭"),array("长春",...
php查询省市区一二级数据,Ajax结合php实现二级联动
weixin_28934777的博客
03-10 271
本文实例为大家分享了Ajax结合php实现二级联动的具体代码，使用ajax,从php中获取数据，具体内容如下使用ajax,从php中获取数据Ajax案例一请选择山东省辽宁省吉林省请选择// 1. 为元素绑定onchange事件var provinceEle = document.getElementById("province");provinceEle.onchange = function()...
js获取用户所在城市
05-14
js获取用户所在城市,是一个很值得查看的代码,可以紧急解决问题。
前端pc怎么获取省份_学下这个技术，让你的前端网页快20%
weixin_39960920的博客
01-01 132
有些人会认为，前端不就是切图然后展示么，有什么技术含量，学前端不如学习Php，此言差矣，这些年随着互联网的发展，前端技术变得越来越重要，生态圈也越来越发达，今天我们来介绍一个前端技术栈，ServiceWorker。学习一个东西，我们先了解出现的背景以及解决了什么问题。随着互联网的发展，前端的页面越来越丰富。对比一下现在跟10年前的网页，你会有更深刻的体会。10年前，我们在PC上需要下载很多程序才能...
Ajax省市联查例子
05-08
Ajax省市联查例子Ajax省市联查例子
中国省市数据，js数组
05-05
js文件，中国省市json数据，可用于制作省市区的三级联动
Ajax获取当前IP和地区位置特效代码
03-20
Ajax获取当前IP和地区位置代码是一款jQuery调用ajax函数获取当前IP地址和当前省市区位置效果代码。
js 根据区域编码向上查找省和市
yusha123的博客
07-21 1587
js 根据区域获取省和市
根据省份id查询当前的省会/简称/省会城市
wflsyf的博客
12-29 1763
jsp代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>使用json格式的数据</title> </head> <body> <script type="text/javascript"> //发起ajax请求，传参给服务器，服务器返回数据 dosearch=f
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TSCCG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值