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

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

news 2026/5/17 16:02:26

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

关于省市区全国三级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数据：全国省市区三级地区MySQL数据_biubiubiu0706的博客-CSDN博客页面加载完毕显示所有省份 <!DOCTYPE html> <html lang&…...

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

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

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

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

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

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

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

PG库列类型转换

首先自定义两个函数，其中try_cast_numeric函数是将字符类型转成数字类型，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变量修改的时候，发现页面上的值没有及时更新？ 解决方法具体原因: 上面这样赋值检测不到，因为响应式的是它的属性，而不是它自身. 方法1: 单个赋值如下： let obj reactive({name: zha…...

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

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

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

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

流媒体之推流和拉流

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

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

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

路径：F12–>Network -->Fetch/XHR,选择一个接口地址。在payload里面是前端发送给后端的参数。也即客户端发送给服务端的请求数据，即接口地址入参。 Preview和Response里都是后端返回给前端的。Preview是格式化过的，比较容易看。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 前言 🔥 优质竞赛项目系列，今天要分享的是基于深度学习的人脸表情识别该项目较…...

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

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

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

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

jmeter 常数吞吐量定时器

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

编程日记 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 主要内容该程序参考文献《考虑寿命损耗的微网电池储能容量优化配置》模型，以购售电成本、燃料成本和储能寿命损耗成本三者之和为目标函数，创新考虑储能寿命损耗约束、放电深度约束和储能循环次…...

编程日记 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 把网页搞下来搞下来之后，双击打开是这样的 2 收…...

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

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

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

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

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

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

若依 MyBatis改为MyBatis-Plus

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

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

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

【技术解析】基于主成分分析与神经网络的航空安全风险建模：从QAR数据预处理到实时预警仿真

1. 航空安全风险建模的技术背景每次坐飞机时，你可能都好奇过：机长是如何确保飞行安全的？其实背后有一整套数据驱动的安全体系在支撑。QAR（快速存取记录器）就像飞机的"黑匣子"，记录了上百项飞行参…...

编程新知 2026/5/17 9:59:23

Excel MCP Server终极指南：3步实现无界面Excel自动化处理

Excel MCP Server终极指南：3步实现无界面Excel自动化处理【免费下载链接】excel-mcp-server A Model Context Protocol server for Excel file manipulation 项目地址: https://gitcode.com/gh_mirrors/ex/excel-mcp-server 你是否厌倦了手动操作Excel的繁琐…...

编程新知 2026/5/17 9:22:49