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。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...
篇章二 论坛系统——系统设计
目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...
【Ftrace 专栏】Ftrace 参考博文
ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...
VSCode 使用CMake 构建 Qt 5 窗口程序
首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...
统计学（第8版）——统计抽样学习笔记（考试用）
一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征（均值、比率、总量）控制抽样误差与非抽样误差 解决的核心问题 在成本约束下，用少量样本准确推断总体特征量化估计结果的可靠性（置…...
python读取SQLite表个并生成pdf文件
代码用于创建含50列的SQLite数据库并插入500行随机浮点数据，随后读取数据，通过ReportLab生成横向PDF表格，包含格式化（两位小数）及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...
比特币：固若金汤的数字堡垒与它的四道防线
第一道防线：机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”（Hashing）就是一种军事级的加密术（SHA-256），能将信函内容（交易细节…...