当前位置： 首页 > news >正文

AJAX学习笔记7 AJAX实现省市联动

news 2025/10/19 22:43:15

需求:网页上选择对应省份之后,动态的关联出该省份对应的市.选择对应的市之后,动态的关联出该市对应的区

关于省市区全国三级Mysql数据：全国省市区三级地区MySQL数据_biubiubiu0706的博客-CSDN博客

页面加载完毕显示所有省份

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省市区域联动</title>
</head>
<body>
<script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">$(function (){//页面加载完成//发送ajax请求,获取所有省份.$.ajax({type:"get",url:"/ajax/liandong",data:"f=0",async:true,success:function (data){//[{"code":"001","name":"浙江省"},{"code":"002","name":"陕西省"}]var html="<option value=\"\">--请选择省份--</option>"for(var i=0;i<data.length;i++){var d=data[i];//console.log(d)html+="<option value=\""+d.code+"\">"+d.name+"</option>"}$("#province").html(html)},error:function (){}})//只要change发生,就发送AJAX请求$("#province").change(function(){//alert("this="+this)console.log(this.value)$.ajax({type:"get",url:"/ajax/liandong",data:"f=1&code="+this.value,async:true,success:function (data){//[{"code":"001","name":"浙江省"},{"code":"002","name":"陕西省"}]var html="<option value=\"\">--请选择城市--</option>"for(var i=0;i<data.length;i++){var d=data[i];//console.log(d)html+="<option value=\""+d.code+"\">"+d.name+"</option>"}$("#province1").html(html)},error:function (){}})})$("#province1").change(function(){//alert("this="+this)console.log(this.value)$.ajax({type:"get",url:"/ajax/liandong",data:"f=2&code="+this.value,async:true,success:function (data){//[{"code":"001","name":"浙江省"},{"code":"002","name":"陕西省"}]var html="<option value=\"\">--请选择区域--</option>"for(var i=0;i<data.length;i++){var d=data[i];//console.log(d)html+="<option value=\""+d.code+"\">"+d.name+"</option>"}$("#province2").html(html)},error:function (){}})})})
</script><select id="province">
<!--    <option value="">&#45;&#45;请选择省份&#45;&#45;</option>-->
<!--    <option value="001">浙江省</option>-->
<!--    <option value="002">陕西省</option>-->
</select>
<select id="province1"></select>
<select id="province2"></select>
</body>
</html>


package com.web;import com.alibaba.fastjson.JSON;
import com.pojo.Area;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;/*** @author hrui* @date 2023/9/5 16:08*/
@WebServlet("/liandong")
public class AjaxRequestLiandong extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String f=req.getParameter("f");String code = req.getParameter("code");Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;List<Area> list=new ArrayList<>();String sql="";try {Class.forName("com.mysql.cj.jdbc.Driver");conn=DriverManager.getConnection("xxx","xxx","xxx");if("0".equals(f)){sql="select id,province_id,province_name from table_china_province";ps= conn.prepareStatement(sql);rs= ps.executeQuery();while(rs.next()){String id=rs.getString("id");String c=rs.getString("province_id");String name=rs.getString("province_name");Area l=new Area(name,c);list.add(l);}}else if("1".equals(f)){sql="select id,city_id,city_name from table_china_city where province_id=?";ps= conn.prepareStatement(sql);ps.setString(1, code);rs= ps.executeQuery();while(rs.next()){String id=rs.getString("id");String c=rs.getString("city_id");String name=rs.getString("city_name");Area l=new Area(name,c);list.add(l);}}else if("2".equals(f)){sql="select id,area_id,area_name from table_china_area where city_id=?";ps= conn.prepareStatement(sql);ps.setString(1, code);rs= ps.executeQuery();while(rs.next()){String id=rs.getString("id");String c=rs.getString("area_id");String name=rs.getString("area_name");Area l=new Area(name,c);list.add(l);}}} catch (ClassNotFoundException | SQLException e) {e.printStackTrace();}finally {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}resp.setContentType("text/json;charset=utf-8");PrintWriter writer = resp.getWriter();String s = JSON.toJSONString(list);writer.print(s);}
}

相关文章：

AJAX学习笔记7 AJAX实现省市联动

需求:网页上选择对应省份之后,动态的关联出该省份对应的市.选择对应的市之后,动态的关联出该市对应的区 关于省市区全国三级Mysql数据&#xff1a;全国省市区三级地区MySQL数据_biubiubiu0706的博客-CSDN博客 页面加载完毕显示所有省份 <!DOCTYPE html> <html lang&…...

编程日记 2023/9/6 20:32:51

国商佳美合作火山引擎数智平台 助推深圳餐博会及美博会数字化升级

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 近日&#xff0c;深圳市国商佳美展览有限公司&#xff08;以下简称“深圳国商佳美”&#xff09;与火山引擎数智平台VeDI达成合作&#xff0c;双方将聚焦于2023年11…...

编程日记 2023/9/6 20:30:48

数据结构与算法学习（day4）——解决实际问题

前言 在本章的学习此前&#xff0c;需要复习前三章的内容&#xff0c;每个算法都动手敲一遍解题。宁愿学慢一点&#xff0c;也要对每个算法掌握基本的理解&#xff01; 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法&#xff0c;今天我们来实践一下前面的三种算法。…...

编程日记 2023/9/6 20:29:47

PG库列类型转换

首先自定义两个函数&#xff0c;其中try_cast_numeric函数是将字符类型转成数字类型&#xff0c;try_cast_timestamp函数是将字符类型转成时间戳类型。 create or replace function try_cast_numeric(p_in text, p_default numeric default null)returns numeric as $$ beginb…...

编程日记 2023/9/6 20:28:44

vue3中的reactive赋值问题

问题 当通过方法对reactive变量修改的时候&#xff0c;发现页面上的值没有及时更新&#xff1f; 解决方法 具体原因: 上面这样赋值检测不到&#xff0c;因为响应式的是它的属性&#xff0c;而不是它自身. 方法1: 单个赋值 如下&#xff1a; let obj reactive({name: zha…...

编程日记 2023/9/6 20:27:42

thinkphp 操作远程oracle遇到的相关坑

坑一&#xff1a;没有内置oracle 解决方法&#xff1a; 1&#xff0c;下载think-oracle 扩展&#xff0c;资源很多&#xff0c;百度即可下载&#xff0c;分别放置于db下的connector 和 builder 文件夹下 2&#xff0c;安装oracle本地客户端&#xff0c;一搜一大把&#xff0c;核…...

编程日记 2023/9/6 20:26:41

流媒体之推流和拉流

推流&#xff1a;将直播内容推送至服务器的过程 拉流&#xff1a;为服务器已有直播内容&#xff0c;用指定地址进行拉取的过程 什么是推流&#xff1f; 推流&#xff0c;指的是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号传到网络的过程。“推流”…...

编程日记 2023/9/6 20:25:40

浏览器中怎样查看前后端传值

路径&#xff1a;F12–>Network -->Fetch/XHR,选择一个接口地址。 在payload里面是前端发送给后端的参数。也即客户端发送给服务端的请求数据&#xff0c;即接口地址入参。 Preview和Response里都是后端返回给前端的。Preview是格式化过的&#xff0c;比较容易看。Resp…...

编程日记 2023/9/6 20:24:38

计算机竞赛 基于深度学习的人脸表情识别

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的人脸表情识别 该项目较…...

编程日记 2023/9/6 20:23:37

虹科分享 | MKA：基于先进车载网络安全解决方案的密钥协议

MKA作为MACsec的密钥协议&#xff0c;具有安全、高效、针对性强的特点&#xff0c;为您的汽车ECU通讯创建了一个安全的通信平台&#xff0c;可以助力您的各种汽车创新项目&#xff01; 虹科方案 | 什么是基于MACsec的汽车MKA 一、MACsec在汽车行业的应用 在以往的文章中&#…...

编程日记 2023/9/6 20:22:36

jmeter 常数吞吐量定时器

模拟固定吞吐量的定时器。它可以控制测试计划中各个请求之间的时间间隔&#xff0c;以达到预期的吞吐量。 参数包括&#xff1a; Target Throughput&#xff1a;目标吞吐量&#xff08;每分钟请求数&#xff09;Calculate Throughput based on&#xff1a;吞吐量计算基准&…...

编程日记 2023/9/6 20:21:35

【大数据Hive】hive 加载数据常用方案使用详解

目录 一、前言 二、load 命令使用 2.1 load 概述 2.1.1 load 语法规则 2.1.2 load语法规则重要参数说明 2.2 load 数据加载操作演示 2.2.1 前置准备 2.2.2 加载本地数据 2.2.3 HDFS加载数据 2.2.4 从HDFS加载数据到分区表中并指定分区 2.3 hive3.0 load 命令新特性 …...

编程日记 2023/9/6 20:20:33

计及电池储能寿命损耗的微电网经济调度（matlab代码）

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《考虑寿命损耗的微网电池储能容量优化配置》模型&#xff0c;以购售电成本、燃料成本和储能寿命损耗成本三者之和为目标函数&#xff0c;创新考虑储能寿命损耗约束、放电深度约束和储能循环次…...

编程日记 2023/9/6 20:19:29

DP读书：鲲鹏处理器 架构与编程（十四）ACPI与软件架构具体调优

一分钟速通ACPI和鲲鹏软件移植 操作系统内核鲲鹏软件移植鲲鹏软件移植流程 编译工具选择编译参数移植案例源码修改案例鲲鹏分析扫描工具 Dependency Advisor鲲鹏代码迁移工具 Porting Advisor 鲲鹏软件性能调优鲲鹏软件性能调优流程CPU与内存子系统性能调优网络子系统性能调优磁…...

编程日记 2023/9/6 20:18:27

4.正则提取html中的img标签的src内容

我们以百度贴吧的1吧举例 目录 1 把网页搞下来 2 收集url 3 处理url 4 空的src 5 容错 6 不使用数字作为文件名 7 并不是所有的图片都用img标签表示 8 img标签中src请求下来不一定正确 9 分页 1 把网页搞下来 搞下来之后&#xff0c;双击打开是这样的 2 收…...

编程日记 2023/9/6 20:17:25

安装对应版本pytorch和torchvision

遇见报错&#xff1a; ERROR: Could not find a version that satisfies the requirement torch (from versions: none) ERROR: No matching distribution found for torch 解决方法&#xff1a; 1、网站找到对应torch和torchvision版本&#xff0c;cp对应python版本&#xff…...

编程日记 2023/9/6 20:16:24

酷克数据与华为合作更进一步 携手推出云数仓联合解决方案

在一起&#xff0c;共迎新机遇&#xff01;8月25-26日&#xff0c;2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业&#xff0c;也是华为重要的生态合作伙伴&#xff0c;受邀参与本次论坛&#xff0c;并展示了云数仓领域最新前沿技术以及联…...

编程日记 2023/9/6 20:15:23

若依 MyBatis改为MyBatis-Plus

主要内容&#xff1a;升级成mybatis-plus&#xff0c;代码生成也是mybatis-plus版本 跟着我一步一步来&#xff0c;就可完成升级&#xff01; 检查&#xff1a;启动程序&#xff0c;先保证若依能启动 第一步&#xff1a;添加依赖 这里需要在两个地方添加&#xff0c;一个是最…...

编程日记 2023/9/6 20:14:21

docker-ubuntu

docker ps docker images 拉取ubuntu镜像 docker pull ubuntu 启动 docker start podid docker run -itd -e TZAsia/Shanghai --name ubuntu-test -v /share:/shared -d ubuntu:latest 进入bash界面 docker exec -it podid /bin/bash 安装sudo apt-get install sudo …...

编程日记 2023/9/6 20:13:19

Mock 基本使用

mock解决的问题 开发时&#xff0c;后端还没完成数据输出&#xff0c;前端只好写静态模拟数据。数据太长了&#xff0c;将数据写在js文件里&#xff0c;完成后挨个改url。某些逻辑复杂的代码&#xff0c;加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据&#xff0c…...

编程日记 2023/9/6 20:12:18

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/10/19 1:25:53

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/10/19 1:43:28

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/10/18 13:32:22

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/28 3:39:04

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/9/3 13:51:02

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2025/10/18 18:20:39

2025年低延迟业务DDoS防护全攻略：高可用架构与实战方案

一、延迟敏感行业面临的DDoS攻击新挑战 2025年&#xff0c;金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征&#xff1a; AI驱动的自适应攻击&#xff1a;攻击流量模拟真实用户行为&#xff0c;差异率低至0.5%&#xff0c;传统规则引…...

编程新知 2025/8/29 1:00:19