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

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

news 2026/2/10 13:57:54

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

关于省市区全国三级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

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

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

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

编程新知 2025/12/19 19:15:39

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2026/2/9 12:41:44

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2026/2/7 9:52:39