django-多级联动课堂版0912

最新推荐文章于 2025-10-13 04:33:08 发布
原创 最新推荐文章于 2025-10-13 04:33:08 发布 · 353 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何使用HTML、jQuery和Ajax技术搭建一个动态的地域选择组件，包括省份、城市和区域的联动选择功能。从页面结构搭建到数据动态加载，再到前后端交互，全面覆盖了前端开发中常见的地域选择组件的实现过程。

新建模板

》完成基本的结构

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="pro" id="pro">
    <option value="">-省份-</option>
</select>


<select name="city" id="city">
    <option value="">-城市-</option>
</select>



<select name="area" id="area">
    <option value="">-区域-</option>
</select>

</body>
</html>

导入jquery

》动态的加载静态文件

在这里插入图片描述

下一步，需要测一下，jquery导入成功了没有

需要可以正常访问这个页面

配置路由

在这里插入图片描述

视图

在这里插入图片描述

试试jquery能否生效

测试

在这里插入图片描述

jquery成功加载

-----主逻辑开始----

思考，如何展现所有的省份？

页面加载后，发一个ajax请求

让后端查询有哪些省份

后端提供数据给前端

发ajax拿省数据

》完成格式

在这里插入图片描述

实现 /one/get_pro/ 的回应

》目的是回应前端的请求，给他一个响应

》路由

在这里插入图片描述

》视图逻辑

在这里插入图片描述

》视图的详情

如何拿到所有的省级信息？？

根据数据表的结构，只要pid_id为空，就是省级地名

在这里插入图片描述

》测试视图的回应是否可以送到前端

在这里插入图片描述
在这里插入图片描述

》发送查询的结果，结果失败

在这里插入图片描述

自己处理数据

因为queryset 不是标准数据类型

传送时会有问题

所以，我们要把需要的数据，处理为python标准数据类型

分析了页面

了解了前端的需求

在这里插入图片描述

所以，自己造数据，给前端

》我们数据太多了

[<>,<>,<>]

可以考虑处理为

[(id，name),(),()]

》代码

在这里插入图片描述

在这里插入图片描述

引入JsonResponse

可以帮我们把python转json字符串

在这里插入图片描述

》效果相当于

在这里插入图片描述
把数据处理为json数据，同时再处理为HttpResponse数据

前端收到的效果：

在这里插入图片描述
》数据成功送 到了前端

前端继续

前端目标

塞option

在这里插入图片描述

》有用的数据

在这里插入图片描述

在这里插入图片描述

遍历数组，数据中的成员又是一个数据

》遍历

在这里插入图片描述

》拿id，拿name，拼option标签

目标：

在这里插入图片描述

拼好后的内容

在这里插入图片描述

最终实现

在这里插入图片描述

在这里插入图片描述

下一步，如何实现，点谁取谁的id

给select标签添加一个change事件

事件的匿免函数中

this，就是发生变化的那个option

通过
在这里插入图片描述
可以拿到value值的

有了 value值，就可以去查找这个城市对应的子级城市了

前端再发请求

在这里插入图片描述

配置路由

在这里插入图片描述

城市视图

在这里插入图片描述

结果

在这里插入图片描述

》后面的流程就和省级是一样的了

复习列表生成式

在这里插入图片描述

城市视图完成

在这里插入图片描述

精选资源
Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)
01-20
平时习惯了在Linux环境写C++，有时候切换到Windows想继续在同一个项目上工作，重新配置环境总是很麻烦。虽然Windows下用Visual Studio写C++只需要双击个图标，但我还是想折腾一下VS Code的环境配置。原因主要有两点...
基于VSCode+clangd插件打造高效C++开发环境之四：clangd配置
05-03 3724
本文介绍如何配置VSCode+clangd插件进行高效C++开发。重点内容包括：1）生成compile_commands.json文件，通过ninja工具提取编译命令并使用gen_compdb脚本转换；2）配置clangd命令行参数，如设置后台索引、并行度等；3）编写.clangd配置文件，调整编译标志和诊断选项；4）添加.clang-format文件定义代码风格；5）在VSCode中添加远程服务器工作目录。配置完成后需重启clangd服务使更改生效。文章还提供了MTK/QCOM等不同平台生成compile
CMakeLists.txt
weixin_52559609的博客
03-06 325
{EIGEN3_INCLUDE_DIR} #其他系统目录的头文件 也可以直接写路径/usr/include/eigen3。#SET(CMAKE_BUILD_TYPE Release) #Release模式。SET(CMAKE_BUILD_TYPE Debug) #debug模式。${PROJECT_SOURCE_DIR}/inc #自己目录的头文件。# 4.设置头文件目录使得系统可以找到对应的头文件。# 3.设置可执行文件与链接库保存的路径。#选择需要编译的源文件，有几个文件写几个。
VSCode+CMake开发环境搭建
热门推荐
科技芯风
08-12 2万+
VSCode+CMake开发环境搭建 安装VScode。 安装编译器MingW。可以看到我的编译器资源文件在以下目录，然后配置编译器的环境变量（作用就是你能够同通过命令行调用这个目录下的程序），具体操作就是在系统高级设置中的path下添加bin目录的绝对目录。 环境变量位置（具体位置以你的为准） 安装cmake。自己去官网下载，同样添加化境其环境变量。方法同上 通过以上操作我们就安装完成了软件部分。下面开始进行环境的配置工作。 二、vscode环境的配置 打开vsco
VSCode+CMake调试配置全攻略。
最新发布
rFK_jw9l的博客
10-13 329
在开发C++项目时，VSCode结合CMake和调试工具能提供高效的开发体验。以下详细介绍如何配置环境并进行调试。Windows用户需安装MinGW或Visual Studio Build Tools。
VSCode 配置 CMake
北_鱼的博客
04-26 1万+
CMake是一个跨平台的开源构建工具，用于自动化构建过程。它可以生成标准的构建文件，从而简化了项目的构建和管理过程。
VS Code：CMake配置
小那猿同学的博客
10-14 4865
介绍了使用vscode进行C/C++开发的准备工作，CMake的配置
VS Code 配置cmake(Linux环境)
m0_62689947的博客
06-25 894
右键CMake Tools右下角齿轮标志，选择扩展设置（Extension Settings）通过sudo apt install cmake在linux上安装cmake。通过命令whereis cmake获取linux中cmake的路径信息。写上这样一句话（具体路径因人而异，填写自己刚才获取到的路径信息），保存。注意要设置的是本地，还是远程连接，点击setting.json。在Vs Code中安装这两个插件。
VS Code配置CMake
11-12 2466
3.3.CTest 作为添加测试支持的附加选项，CPack作为CPack 支持的附加选项，都可以不选。在 Windows上为Visual Studio Code配置CMake，构建管理CMake项目。3.4.选择该项目是创建库还是可执行文件，选择可执行文件Executable作为项目类型，3.5.VSCode就会为你生成一个CMake项目，点击工具栏的编译运行。（国内镜像下载更快），安装完成后在终端中输入cmake命令测试是否安装成功。2.为VSCode安装扩展CMake和CMake Tools。
Vscode + Clangd 配置嵌入式 Linux 开发环境
yz想要成为钢铁侠
05-21 6509
Vscode + Clangd 配置嵌入式 Linux 开发环境
Longan nano RISC-V 开发板 VSCode+PlatformIO 开发环境最新配置 NucLei SDK 搭建流程
贬道
03-29 2451
Longan nano 开发板，VSCode+PlatformIO 开发环境配置，项目配置与点灯程序下载
《Vscode配置C/C++环境进阶：结合CMake打造跨平台工程》
Start_mswin的博客
06-12 626
“手动写编译命令太麻烦？工程文件混乱难以维护？本文教你用CMake整合Vscode，实现一键编译、自动生成工程文件，支持Windows/Mac/Linux无缝切换，彻底告别配置混乱！”
VSCode中配置CMake
0xffffffffff的博客
07-18 5539
很久没有更新博客了，之前寒假写过一个通过修改tasks.json配置文件来运行多文件项目的方法，实际上太繁琐太不优雅且不实用，我仅在学校的C语言作业里用过一次，后来一直使用cmake来链接c/cpp项目，camke在平台上更适合win平台或者跨平台开发，在编程语言上更适合cpp开发，下面简单介绍一下如何在vscode里配置并使用简单的cmake。在vscode命令面板中运行cmake configure命令，然后选择平台原生的cpp构建工具等待配置完成。首先下载cmake，可以到官网。
10.vscode配置cmake
weixin_38738238的博客
03-22 908
打开vscode应用商店安装。
Linux系统下基于VSCode和Cmake进行C++开发
每天进步一点点。
03-10 5351
在 Linux 系统中，使用 Visual Studio Code (VSCode) 和 CMake 进行 C++ 开发是十分方便的。以下是整个工作流的简介：VSCode 是由微软出品的一款轻量级、高度可扩展的代码编辑器，它支持几乎所有的主流编程语言，可以在多种操作系统（包括 Linux）上运行。CMake 是一个开源的跨平台自动化建构系统，它用于控制编译过程，使其在多个平台上能够相同。在 VSCode 中，我们使用“CMake Tools”插件来调用和使用 CMake。
使用VScode配置Cmake工程环境进行编译，下载，调试（Window系统)
f3344556677的博客
11-05 963
1.Cmake软件3.MinGW4.J-link驱动。
vscode配置cmake(实现多文件编译)
m0_50866704的博客
04-08 8259
更改下面两行，program为可执行文件的位置，miDebuggerPath为自己安装路径。目前更改程序还得手动生成可执行文件，为了自动生成，来配置tasks.json文件。按F5，点击配置任务，点击g++生成活动文件。windows系统，选择x64.zip。先点击左下方生成按钮，生成可执行文件。可以F5，测试一下，现在可以开始调试。创建launch.json文件，选择。如果生成的只有两行代码，点击右下角的。（会弹出一个选项，选择g++即可）首先在launch.json添加。之后点运行，输出成功。
windows下VSCode配置C++/CMake/Qt开发环境
mahuifa的博客
12-23 3737
vscode在windows配置C++/cmake/qt开发环境详细说明
Linux环境下使用VScode调试CMake工程
hypc9709的博客
03-09 5803
本文将介绍如何在VSCode中对一个CMake工程进行编译调试。
Linux系统VsCode 配置C/C++环境cmake
03-18
### 配置 Linux 系统上的 Visual Studio Code 和 CMake 的 C/C++ 开发环境 在 Linux 系统上配置 Visual Studio Code (VSCode) 并使用 CMake 构建 C/C++ 项目的过程涉及多个步骤，主要包括安装必要的软件包、设置 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值