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

Django之Ajax实战笔记--城市级联操作

news 2026/5/25 8:12:41

1. 项目架构搭建

  • 1.1 创建项目tpdemo,创建应用myapp

      # 创建项目框架tpdemo$ django-admin startproject tpdemo$ cd tpdemo# 在项目中创建一个myapp应用$ python manage.py startapp myapp# 创建模板目录$ mkdir templates$ mkdir templates/myapp$ cd ..$ tree tpdemotpdemo├── tpdemo│   ├── __init__.py│   ├── settings.py│   ├── urls.py│   └── wsgi.py├── manage.py├── myapp│   ├── admin.py│   ├── apps.py│   ├── __init__.py│   ├── models.py│   ├── tests.py│   └── views.py└── templates└── mytest
  • 1.2 编辑tpdemo/tpdemo/settings.py文件，配置数据库连接
...
#配置自己的服务器IP地址
ALLOWED_HOSTS = ['*']...
#添加自己应用
INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','myapp',
]
...# 配置模板路径信息
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR,'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]...
# 数据库连接配置
DATABASES = {
'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'mytest','USER': 'root','PASSWORD': '','HOST': 'localhost','PORT': '3306',
}
...
  • 1.3 Django使用MySQL数据库需要加载 MySQLdb模块，需要安装 mysqlclient，若已经安装请略过。
   pip install  mysqlclient
  • 1.4 编写项目主路由urls配置,配置对myapp应用路由的访问连接配置: tpdemo/tpdemo/urls.py

from django.urls import include,path
from django.contrib import adminurlpatterns = [path('admin/', admin.site.urls),path('', include('myapp.urls')),
]

  • 1.5 配置当前应用myapp的路由配置

  • 在myapp应用目录下创建一个路由文件urls.py文件，注意此文件编码为utf-8（建议复制一个）。

  • 编辑应用中的路由配置文件：tpdemo/myapp/urls.py, 内容如下：


from django.urls import pathfrom . import viewsurlpatterns = [path('', views.index, name="index"),
]
  • 1.6 编写视图tpdemo/myapp/views.py
from django.shortcuts import render
from django.http import HttpResponse# 网站首页
def index(request):return render(request,'myapp/index.html')
  • 1.7 定义模板并编写模板 tpdemo/templates/myapp/index.html
<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>Django框架案例</title>
</head>
<body><h2>Django框架案例</h2><h4><a href="#">1. Ajax实战笔记--城市级联操作</a></h4>
</body>
</html>
  • 1.8 启动服务，通过浏览器测试效果
[root@localhost tpdemo]# ls
tpdemo  manage.py  myapp  templates[root@localhost tpdemo]# python manage.py runserver 0.0.0.0:8000
  • 打开浏览器输入网址：http://localhost:8000

2. 开发《城市级联信息操作》

  • 2.1 将提前准备好的district.sql信息导入到mydb数据库中

    在mydb数据库中存在一个district（城市区县信息表）

  • 2.2 编写model类：打开tpdemo/myapp/models.py文件

from django.db import models# 自定义城市区县信息model类
class District(models.Model):name = models.CharField(max_length=255)upid = models.IntegerField()class Meta:db_table = "district"  # 指定真实表名
  • 2.3 编写子路由文件：tpdemo/myapp/urls.py
...# 城市级联操作path('showdistrict/', views.showdistrict, name='showdistrict'), #加载网页path('district/<int:upid>', views.district, name='district'),  #Ajax加载城市信息
...
  • 2.4 编写视图文件：tpdemo/myapp/views.py
from django.http import HttpResponse,JsonResponsefrom myapp.models import District...
# 加载城市级联信息操作模板
def showdistrict(request):return render(request,"myapp/district.html")# 加载对应的城市信息，并json格式ajax方式响应
def district(request,upid):dlist = District.objects.filter(upid=upid)list = []for ob in dlist:list.append({'id':ob.id,'name':ob.name})return JsonResponse({'data':list})
...

  • 启动服务测试：url：http://localhost:8000/district/0 加载一级城市信息

  • 2.5 开发网页前端的准备：首先启用静态资源目录

    • 在项目的根目录下创建一个静态资源目录：static 路径：tpdemo/static
    • 并在此目录下创建一个js目录。然后将jquery文件：jquery-1.8.2.min.js放到此目录中 具体位置：tpdemo/static/js/jquery-1.8.2.min.js
    • 编辑tpdemo/tpdemo/settings.py配置文件，在最后加入代码：(配置静态资源目录)
...
STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'),
]
  • 2.6 配置访问url：编辑tpdemo/templates/myapp/index.html
...<h4><a href="{% url 'showdistrict' %}">1. Ajax实战笔记--城市级联操作</a></h4> 
...
  • 2.7 定义并编写模板文件：tpdemo/templates/myapp/district.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Ajax实战--城市级联操作</title><script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script><script type="text/javascript">//编写js代码$(function(){$.ajax({type:'get',url:"{% url 'district' 0 %}",dataType:'json',async: false,success:function(res){list = res.data;//遍历响应的城市信息for(var i=0;i<list.length;i++){$("#cid").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");}},});//获取最后一个下拉框并添加选中事件$("select").live('change',function(){//获取选中的id号var id = $(this).val();$(this).nextAll().remove();$.ajax({url: "/district/"+id,type: 'get',data: {},dataType:'json',success:function(res){if(res.data.length<1)return;var data = res.data;var select = $("<select></select>")for(var i=0;i<data.length;i++){$('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)//$('select:last').append('<option value="'+data[i].id+'">'+data[i].name+'</option>'); }$("select:last").after(select);}});});})</script>
</head>
<body><h2>Ajax实战笔记--城市级联操作</h2><select id="cid"><option>-请选择-</option></select>
</body>
</html>

相关文章：

Django之Ajax实战笔记--城市级联操作

1. 项目架构搭建 1.1 创建项目tpdemo,创建应用myapp # 创建项目框架tpdemo$ django-admin startproject tpdemo$ cd tpdemo# 在项目中创建一个myapp应用$ python manage.py startapp myapp# 创建模板目录$ mkdir templates$ mkdir templates/myapp$ cd ..$ tree tpdemotpdemo…...

编程日记 2024/5/27 5:48:19

基于Netty实现WebSocket服务端

本文基于Netty实现WebSocket服务端&#xff0c;实现和客户端的交互通信&#xff0c;客户端基于JavaScript实现。 在【WebSocket简介-CSDN博客】中&#xff0c;我们知道WebSocket是基于Http协议的升级&#xff0c;而Netty提供了Http和WebSocket Frame的编解码器和Handler&#…...

编程日记 2024/5/27 5:47:18

27【Aseprite 作图】盆栽——拆解

1 橘子画法拆解 （1）浅色3 1 0；深色0 2 3 就可以构成一个橘子 （2）浅色 2 1；深色1 0 （小个橘子） （3）浅色 2 1 0；深色1 2 3 2 树根部分 （1）底部画一条横线 （2）上一行 左空2 右空1 【代表底部重心先在右】 （3）再上一行，左空1，右空1 （4）再上一行，左突出1，…...

编程日记 2024/5/27 5:46:17

【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目

项目介绍 【开源】项目基于pythonpandasflaskmysql等技术实现豆瓣电影数据获取及可视化分析展示&#xff0c;觉得有用的朋友可以来个一键三连&#xff0c;感谢&#xff01;&#xff01;&#xff01; 项目演示 【开源】2024最新python豆瓣电影数据爬虫可视化分析项目 项目截图…...

编程日记 2024/5/27 5:45:15

[JDK工具-5] jinfo jvm配置信息工具

文章目录 1. 介绍2. 打印所有的jvm标志信息 jinfo -flags pid3. 打印指定的jvm参数信息 jinfo -flag InitialHeapSize pid4. 启用或者禁用指定的jvm参数 jinfo -flags [|-]HeapDumpOnOutOfMemoryError pid5. 打印系统参数信息 jinfo -sysprops pid6. 打印以上所有配置信息 jinf…...

编程日记 2024/5/27 5:44:14

【Linux系统编程】进程概念、进程排队、进程标识符、进程状态

目录 什么是进程&#xff1f; 浅谈进程排队 简述进程属性 进程属性之进程标识符 进程操作之进程创建 初识fork fork返回值 原理角度理解fork fork的应用 进程属性之进程状态 再谈进程排队 进程状态 运行状态 阻塞状态 挂起状态 Linux下的进程状态 “R”(运行状…...

编程日记 2024/5/27 5:43:13

Java与GO语言对比分析

你是不是总听到go与java种种对比&#xff0c;其中在高并发的服务器端应用场景会有人推荐你使用go而不是 java。 那我们就从两者运行原理和基本并发设计来对比分析&#xff0c;看看到底怎么回事。 运行原理对比 java java 中 jdk 已经帮我们屏蔽操作系统区别。 只要我们下载并…...

编程日记 2024/5/27 5:40:10

Linux文件系统原理

Linux文件系统 冯诺依曼在1945年提出计算机的五大组成部分 运算器&#xff1a;CPU 控制器&#xff1a;CPU 存储器&#xff1a;内存和硬盘 输入设备&#xff1a;鼠标、硬盘 输出设备&#xff1a;显示器一、硬盘结构 机械硬盘结构 扇区&#xff1a;硬盘的最小存储单位&#xff…...

编程日记 2024/5/27 5:39:09

初识Spring Cache：如何简化你的缓存处理？

文章目录 1、Spring Cache介绍2、 常用注解3、 使用案例 1、Spring Cache介绍 Spring Cache 是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单地加一个注解&#xff0c;就能实现缓存功能。 Spring Cache 提供了一层抽象&#xff0c;底层可以切换不同的…...

编程日记 2024/5/27 5:38:07

攻防世界[GoodRe]

攻防世界[GoodRe] 学到知识&#xff1a; 逆向的精髓&#xff1a;三分懂&#xff0c;七分蒙。TEA 算法快速识别&#xff08;蒙&#xff09;&#xff1a; 数据处理的形式&#xff1a;进入加密时的数据和加密结束后的数据&#xff0c;处理时数据的分组等等&#xff0c;都能用来…...

编程日记 2024/5/27 5:35:04

IntelliJ IDEA实用插件：轻松生成时序图和类图

IntelliJ IDEA生成时序图、类图 一、SequenceDiagram1.1 插件安装1.2 插件设置1.3 生成时序图 二、PlantUML Integration2.1 插件安装2.2 插件设置2.3 生成类图 在软件建模课程的学习中&#xff0c;大家学习过多种图形表示方法&#xff0c;这些图形主要用于软件产品设计。在传统…...

编程日记 2024/5/27 5:34:03

SpringBoot + Mybatis-Plus中乐观锁实现

悲观锁 悲观锁是一种悲观思想&#xff0c;它认为数据很可能会被别人所修改 所以总会对数据进行上锁&#xff0c;读操作和写操作都会上锁&#xff0c;性能较低&#xff0c;使用较少&#xff01; 乐观锁 乐观锁是一种乐观思想&#xff0c;它认为数据并不一定会被别人所修改 所以…...

编程日记 2024/5/27 5:33:02

设计模式深度解析：分布式与中心化，IT界两大巨头“华山论剑”

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨IT界的两大巨头交锋✨ &#x1f44b; 在IT界的广阔天地中&#xff0c;有两座…...

编程日记 2024/5/27 5:30:59

转行一年了

关注、星标公众号&#xff0c;直达精彩内容 ID&#xff1a;技术让梦想更伟大 整理&#xff1a;李肖遥 来公司一年了。 说是转行其实还是在半导体行业&#xff0c;熟悉我的朋友知道 &#xff0c;我在18年开始进入半导体行业&#xff0c;那个时候想着行业很重要&#xff0c;站对了…...

编程日记 2024/5/27 5:29:58

【LeetCode 151】反转字符串中的单词

1. 题目 2. 分析 这题要是用Python写&#xff0c;就非常简单了。 3. 代码 class Solution:def reverseWords(self, s: str) -> str:s " ".join(reversed(s.strip().split()))return s...

编程日记 2024/5/27 5:28:57

Behind the Code：Polkadot 如何重塑 Web3 未来

2024 年 5 月 17 日 Polkadot 生态 Behind the Code 第二季第一集 《创造 Web3 的未来》正式上线。第一集深入探讨了 Polkadot 和 Web3 技术在解决数字身份、数据所有权和去中心化治理方面的巨大潜力。 &#x1f50d; 查看完整视频&#xff1a; https://youtu.be/_gP-M5nUidc?…...

编程日记 2024/5/27 5:25:53

for循环里如果std::pair的类型写不对，可能会造成性能损失

第一版 std::map<int, int> t;t.emplace(1, 1);for (const std::pair<int,int>& data : t){int i 0;std::ignore i;}中间留一些空格&#xff0c;是因为ms在调试的时候&#xff0c;尤其是模板比较多的时候&#xff0c;经常断点的行号有问题。比如第5行的断点&…...

编程日记 2024/5/27 5:24:51

【Linux】Linux的基本指令_2

文章目录 二、基本指令8. man9. nano 和 cat10. cp11. mv12. echo 和 > 和 >> 和 <13. more 和 less14. head 和 tail 和 | 未完待续 二、基本指令 8. man Linux的命令有很多参数&#xff0c;我们不可能全记住&#xff0c;我们可以通过查看联机手册获取帮助。访问…...

编程日记 2024/5/27 5:23:50

Effective C++（3）

3.资源管理 条款13&#xff1a;以对象管理资源 以对象管理资源对于传统的堆资源管理&#xff0c;我们需要使用成对的new和delete&#xff0c;这样若忘记delete就会造成内存泄露。因此&#xff0c;我们应尽可能以对象管理资源&#xff0c;并采用RAII&#xff08;Resource Acqu…...

编程日记 2024/5/27 5:21:48

自定义RedisTemplate序列化器

大纲 RedisSerializerFastJsonRedisSerializer自定义二进制序列化器总结代码 在《RedisTemplate保存二进制数据的方法》一文中&#xff0c;我们将Java对象通过《使用java.io库序列化Java对象》中介绍的方法转换为二进制数组&#xff0c;然后保存到Redis中。实际可以通过定制Red…...

编程日记 2024/5/27 5:18:46

2026年学习Java还有前景吗?如何看待2026Java程序员就业难现状?

2026年Java的前景和就业情况&#xff0c;这是一个很现实的问题。我们直接来看核心。Java依然有前景&#xff0c;但“普通选手”的就业黄金期确实过去了&#xff0c;现在需要的是“高配选手”。所谓的“就业难”&#xff0c;本质不是Java不行了&#xff0c;而是行业对Java程序员…...

编程新知 2026/5/25 7:49:20

避坑指南：UE球形遮罩材质边缘闪烁、接缝问题分析与修复（附完整节点图）

深度解析&#xff1a;UE球形遮罩材质边缘闪烁与接缝问题的终极解决方案在虚幻引擎中实现球形遮罩效果是许多项目中的常见需求&#xff0c;但开发者们往往会遇到一个棘手的问题——遮罩边缘出现闪烁、锯齿或明显的接缝。这种现象不仅影响视觉效果&#xff0c;还可能破坏场景的整…...

编程新知 2026/5/25 7:24:26

第一次写 Ascend C 算子？先了解 asc-devkit 工具链

前言 当你第一次尝试为昇腾 NPU 写算子的时候&#xff0c;大概率会被一堆概念搞得头大&#xff1a;Kernel 怎么写&#xff1f;CPU 侧代码怎么写&#xff1f;算子怎么注册到框架里去&#xff1f;编译怎么弄&#xff1f;单元测试怎么写&#xff1f; 昇腾 CANN 生态中的 asc-dev…...

编程新知 2026/5/25 6:45:57

机器学习解码中子星暗物质：XGBoost与SHAP分析在粒子天体物理中的应用

1. 项目概述&#xff1a;当机器学习遇见中子星&#xff0c;如何解码暗物质之谜&#xff1f;在粒子物理和天体物理的交叉前沿&#xff0c;我们面临着一个根本性的挑战&#xff1a;如何探测那些不发光、不吸收光&#xff0c;却占据宇宙物质总量约85%的暗物质&#xff1f;轴子&…...

编程新知 2026/5/25 6:34:54

别再只会 `apk add` 了！Alpine Linux 包管理器 APK 的 10 个高效用法与避坑指南

Alpine Linux 包管理器 APK 的 10 个高效用法与避坑指南如果你经常使用 Alpine Linux 作为容器基础镜像&#xff0c;那么对apk add这个命令一定不陌生。但 Alpine 的包管理器 APK 远不止安装软件这么简单&#xff0c;它隐藏了许多能大幅提升工作效率的实用技巧。本文将带你深入…...

编程新知 2026/5/25 6:30:42

避坑指南：Linux V4L2采集图像时，为什么你的JPG文件总是打不开？

深度解析&#xff1a;Linux V4L2图像采集中JPG文件损坏的五大根源与解决方案当你在Linux环境下使用V4L2框架进行图像采集时&#xff0c;是否遇到过这样的场景&#xff1a;代码编译运行一切顺利&#xff0c;生成的JPG文件却无法打开&#xff0c;报错"Not a JPEG file"…...

编程新知 2026/5/25 6:19:25

Unity 2D游戏地图制作：从零上手Tile Palette的7个核心工具（附快捷键清单）

Unity 2D游戏地图制作&#xff1a;从零上手Tile Palette的7个核心工具&#xff08;附快捷键清单&#xff09;在独立游戏开发领域&#xff0c;2D游戏因其独特的艺术风格和相对较低的开发门槛&#xff0c;始终保持着旺盛的生命力。无论是复古风格的平台跳跃游戏&#xff0c;还是精…...

编程新知 2026/5/25 5:59:40

贝叶斯优化驱动量子噪声建模：数据高效提升NISQ仿真精度

1. 项目概述与核心价值在量子计算领域&#xff0c;尤其是在当前嘈杂中型量子&#xff08;NISQ&#xff09;时代&#xff0c;一个核心的挑战在于如何让仿真结果与真实硬件上的运行结果保持一致。我们设计量子算法、优化电路布局、评估性能&#xff0c;很大程度上依赖于对量子处理…...

编程新知 2026/5/25 5:51:37

从0到1：如何打造一块高精度的工业级隔离数据采集卡？

http://www.z-linear.com 在工业自动化与智能制造的浪潮中&#xff0c;数据采集卡&#xff08;DAQ&#xff09;就像是系统的“感官神经”&#xff0c;负责将现实世界的温度、压力、电压、电流等物理量转化为数字世界的数据。然而&#xff0c;在复杂的工业现场&#xff0c;强电…...

编程新知 2026/5/25 5:13:33

伽马暴宇宙学分析中流量阈值选择的敏感性研究

1. 研究背景与核心问题在伽马射线暴&#xff08;GRB&#xff09;的宇宙学研究领域&#xff0c;一个长期困扰我们的核心问题是&#xff1a;我们看到的GRB样本&#xff0c;究竟在多大程度上反映了它们在宇宙中的真实分布&#xff1f;这听起来像是个哲学问题&#xff0c;但在实际操…...

编程新知 2026/5/25 5:09:11