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

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

news 2026/3/31 1:37:10

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

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

一天一个开源项目（第59篇）：Dream Recorder - 用 AI 把梦境变成视频的物理设备

引言 “Record your dreams. Wake up. Speak. Watch them come to life.” 这是「一天一个开源项目」系列的第 59 篇文章。今天介绍的项目是 Dream Recorder&#xff08;GitHub&#xff09;。 想把梦境变成可回放的视频&#xff1f;Dream Recorder 是 Modem 开源的物理梦境记录…...

编程新知 2026/3/31 1:17:06

Ubuntu 23.04 避坑指南：pip install virtualenv 报错 extern-managed-environment 的3种解决方案

Ubuntu 23.04 Python包管理新规深度解析&#xff1a;安全与灵活性的平衡之道 最近升级到Ubuntu 23.04的Python开发者们可能遇到了一个令人困惑的新错误——当尝试使用pip install安装包时&#xff0c;系统会抛出"externally-managed-environment"的警告并拒绝执行。这…...

编程新知 2026/3/31 0:52:49

终极免费图像浏览器：90+格式支持与专业体验指南

终极免费图像浏览器&#xff1a;90格式支持与专业体验指南 【免费下载链接】ImageGlass &#x1f3de; A lightweight, versatile image viewer 项目地址: https://gitcode.com/gh_mirrors/im/ImageGlass ImageGlass是一款专为Windows用户设计的轻量级开源图像浏览器&am…...

编程新知 2026/3/30 23:31:05

无需代码！用Qwen2.5-VL-7B-Instruct实现智能图片分析与物体检测

无需代码&#xff01;用Qwen2.5-VL-7B-Instruct实现智能图片分析与物体检测 你是不是也遇到过这样的场景&#xff1a;手头有一堆图片&#xff0c;需要快速提取里面的文字、识别物体、或者描述图片内容&#xff1f;传统方法要么需要写代码调用API&#xff0c;要么得安装复杂的软…...

编程新知 2026/3/30 23:14:29

智能驾驶之红绿灯识别 斑马线识别 减速带识别 yolo数据集 深度学习数据集 第10625期

智能驾驶之红绿灯识别 斑马线识别 减速带识别 yolo第10625期 README 项目概述 本数据集聚焦于智能驾驶核心道路要素的识别任务&#xff0c;提供高质量标注图像&#xff0c;专为训练和评估目标检测模型而设计。数据涵盖城市道路常见交通设施与标记&#xff0c;适用于自动驾驶感知…...

编程新知 2026/3/30 22:09:41

Legacy iOS Kit终极指南：旧款iOS设备降级、越狱与恢复完整教程

Legacy iOS Kit终极指南&#xff1a;旧款iOS设备降级、越狱与恢复完整教程 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...

编程新知 2026/3/30 21:37:03

SRS流媒体服务器实战：手把手教你配置RTMP转WebRTC（含AAC转Opus避坑指南）

SRS流媒体服务器深度解析&#xff1a;RTMP转WebRTC全链路实战与音频转码优化 1. 低延迟直播技术演进与架构选型 在实时互动场景爆发的今天&#xff0c;传统RTMP协议的高延迟问题日益凸显。根据WebRTC标准委员会的测试数据&#xff0c;基于UDP的WebRTC传输链路能够将端到端延迟控…...

编程新知 2026/3/30 21:29:00

ABAQUS UMAT子程序实现应变梯度塑性理论模拟损伤和断裂的分析 (包含的文件如图所示，p...

ABAQUS UMAT子程序实现应变梯度塑性理论模拟损伤和断裂的分析 (包含的文件如图所示&#xff0c;pdf详细介绍子程序的内容&#xff0c;公式等)在金属材料的断裂分析中&#xff0c;传统本构模型经常遇到网格敏感性问题。五年前我第一次尝试用应变梯度理论解决这个问题时&#xff…...

编程新知 2026/3/30 20:58:54

罗技鼠标宏压枪脚本终极指南：3步实现绝地求生精准射击

罗技鼠标宏压枪脚本终极指南&#xff1a;3步实现绝地求生精准射击 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为绝地求生中枪口乱跳而烦…...

编程新知 2026/3/30 20:34:39

Reset Windows Update Tool终极指南：3步快速修复Windows更新所有问题

Reset Windows Update Tool终极指南&#xff1a;3步快速修复Windows更新所有问题 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool …...

编程新知 2026/3/30 19:25:26