AJAX学习笔记7 AJAX实现省市联动
需求:网页上选择对应省份之后,动态的关联出该省份对应的市.选择对应的市之后,动态的关联出该市对应的区
关于省市区全国三级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="">--请选择省份--</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&…...
国商佳美合作火山引擎数智平台 助推深圳餐博会及美博会数字化升级
更多技术交流、求职机会，欢迎关注字节跳动数据平台微信公众号，回复【1】进入官方交流群 近日，深圳市国商佳美展览有限公司（以下简称“深圳国商佳美”）与火山引擎数智平台VeDI达成合作，双方将聚焦于2023年11…...
数据结构与算法学习（day4）——解决实际问题
前言 在本章的学习此前，需要复习前三章的内容，每个算法都动手敲一遍解题。宁愿学慢一点，也要对每个算法掌握基本的理解！ 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法，今天我们来实践一下前面的三种算法。…...
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…...
vue3中的reactive赋值问题
问题 当通过方法对reactive变量修改的时候，发现页面上的值没有及时更新？ 解决方法 具体原因: 上面这样赋值检测不到，因为响应式的是它的属性，而不是它自身. 方法1: 单个赋值 如下： let obj reactive({name: zha…...
thinkphp 操作远程oracle遇到的相关坑
坑一：没有内置oracle 解决方法： 1，下载think-oracle 扩展，资源很多，百度即可下载，分别放置于db下的connector 和 builder 文件夹下 2，安装oracle本地客户端，一搜一大把，核…...
流媒体之推流和拉流
推流：将直播内容推送至服务器的过程 拉流：为服务器已有直播内容，用指定地址进行拉取的过程 什么是推流？ 推流，指的是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号传到网络的过程。“推流”…...
浏览器中怎样查看前后端传值
路径：F12–>Network -->Fetch/XHR,选择一个接口地址。 在payload里面是前端发送给后端的参数。也即客户端发送给服务端的请求数据，即接口地址入参。 Preview和Response里都是后端返回给前端的。Preview是格式化过的，比较容易看。Resp…...
计算机竞赛 基于深度学习的人脸表情识别
文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 基于深度学习的人脸表情识别 该项目较…...
虹科分享 | MKA：基于先进车载网络安全解决方案的密钥协议
MKA作为MACsec的密钥协议，具有安全、高效、针对性强的特点，为您的汽车ECU通讯创建了一个安全的通信平台，可以助力您的各种汽车创新项目！ 虹科方案 | 什么是基于MACsec的汽车MKA 一、MACsec在汽车行业的应用 在以往的文章中&#…...
jmeter 常数吞吐量定时器
模拟固定吞吐量的定时器。它可以控制测试计划中各个请求之间的时间间隔，以达到预期的吞吐量。 参数包括： Target Throughput：目标吞吐量（每分钟请求数）Calculate Throughput based on：吞吐量计算基准&…...
【大数据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 命令新特性 …...
计及电池储能寿命损耗的微电网经济调度（matlab代码）
目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《考虑寿命损耗的微网电池储能容量优化配置》模型，以购售电成本、燃料成本和储能寿命损耗成本三者之和为目标函数，创新考虑储能寿命损耗约束、放电深度约束和储能循环次…...
DP读书：鲲鹏处理器 架构与编程（十四）ACPI与软件架构具体调优
一分钟速通ACPI和鲲鹏软件移植 操作系统内核鲲鹏软件移植鲲鹏软件移植流程 编译工具选择编译参数移植案例源码修改案例鲲鹏分析扫描工具 Dependency Advisor鲲鹏代码迁移工具 Porting Advisor 鲲鹏软件性能调优鲲鹏软件性能调优流程CPU与内存子系统性能调优网络子系统性能调优磁…...
4.正则提取html中的img标签的src内容
我们以百度贴吧的1吧举例 目录 1 把网页搞下来 2 收集url 3 处理url 4 空的src 5 容错 6 不使用数字作为文件名 7 并不是所有的图片都用img标签表示 8 img标签中src请求下来不一定正确 9 分页 1 把网页搞下来 搞下来之后，双击打开是这样的 2 收…...
安装对应版本pytorch和torchvision
遇见报错： 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版本ÿ…...
酷克数据与华为合作更进一步 携手推出云数仓联合解决方案
在一起，共迎新机遇！8月25-26日，2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业，也是华为重要的生态合作伙伴，受邀参与本次论坛，并展示了云数仓领域最新前沿技术以及联…...
若依 MyBatis改为MyBatis-Plus
主要内容：升级成mybatis-plus，代码生成也是mybatis-plus版本 跟着我一步一步来，就可完成升级！ 检查：启动程序，先保证若依能启动 第一步：添加依赖 这里需要在两个地方添加，一个是最…...
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 …...
Mock 基本使用
mock解决的问题 开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！
本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...
6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础
第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...
【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统
Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...
Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志，定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer（版本 2.22.2） 发布 PostgreSQL（PostGIS）中的表为地图服务时，常常会遇到一个小问题： WFS 查询中，主键字段（如 id）莫名其妙地消失了！ 即使你在…...
Cursor AI 账号纯净度维护与高效注册指南
Cursor AI 账号纯净度维护与高效注册指南：解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后，许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...