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

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

news 2026/4/8 22:31:36

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

如何用Dify零代码打造专属AI知识管家：从资料整理到智能对话全指南

1. 为什么你需要一个AI知识管家&#xff1f; 你有没有遇到过这种情况&#xff1a;电脑里存了几百份工作文档&#xff0c;手机相册堆满了截图&#xff0c;微信收藏夹塞得满满当当&#xff0c;但真要找某个关键信息时却像大海捞针&#xff1f;我以前经常被这个问题困扰&#xff0…...

编程新知 2026/4/8 21:25:21

电能质量扰动仿真：MATLAB/Simulink的奇妙之旅

Power Quality Disturbance&#xff1a;基于MATLAB/Simulink的各种电能质量扰动仿真模型&#xff0c;包括配电线路故障、感应电机启动、变压器励磁、单相/三相非线性负载等模型&#xff0c;可用于模拟各种电能质量扰动和分析研究。 附带一份详细的说明文档对各模型进行说明&…...

编程新知 2026/4/8 21:01:02

VL1_四选一多路器：从RTL设计到覆盖率验证的全流程解析

1. 四选一多路器的基本概念与应用场景 四选一多路器&#xff08;4-to-1 Multiplexer&#xff09;是数字电路设计中最基础的组合逻辑电路之一。简单来说&#xff0c;它就像一个智能开关&#xff0c;能够根据控制信号从四个输入信号中选择一个输出。这种电路在实际项目中应用非常…...

编程新知 2026/4/8 20:55:01

GameHub部署指南：Flatpak、AppImage和原生包安装的完整对比

GameHub部署指南&#xff1a;Flatpak、AppImage和原生包安装的完整对比 【免费下载链接】GameHub All your games in one place 项目地址: https://gitcode.com/gh_mirrors/ga/GameHub 想要将所有游戏集中管理在一个地方&#xff1f;GameHub是你的终极游戏库解决方案&am…...

编程新知 2026/4/8 19:49:46

OpenClaw开源贡献：为Phi-3-mini开发新技能指南

OpenClaw开源贡献&#xff1a;为Phi-3-mini开发新技能指南 1. 为什么选择为Phi-3-mini开发OpenClaw技能&#xff1f; 去年夏天&#xff0c;我在尝试用OpenClaw自动化处理日常工作报告时&#xff0c;发现现有的技能库对小型语言模型的支持相当有限。当时正好接触到微软开源的P…...

编程新知 2026/4/8 19:17:20

SVA断言实战指南：从基础语法到复杂时序验证

1. SVA断言入门&#xff1a;从基础语法开始 第一次接触SystemVerilog断言(SVA)时&#xff0c;我完全被那些奇怪的符号搞懵了。什么"##"、"|->"、"intersect"&#xff0c;看起来就像天书一样。但当我真正理解了这些符号背后的逻辑后&#xff0…...

编程新知 2026/4/8 18:42:58

Spring with AI (): 搜索扩展——向量数据库与RAG(上)悄

先回顾&#xff1a;三次握手&#xff08;建立连接&#xff09;核心流程&#xff08;实际版&#xff09; 为了让挥手流程衔接更顺畅&#xff0c;咱们先快速回顾三次握手的实际核心&#xff0c;避免上下文脱节&#xff1a; 第一步&#xff08;客户端→服务器&#xff09;&#xf…...

编程新知 2026/4/8 17:56:17

uniApp相机、存储、电话权限申请全攻略：告别频繁弹窗，提升用户体验

uniApp权限管理艺术&#xff1a;优雅实现相机、存储、电话权限的智能授权策略 在移动应用开发中&#xff0c;权限管理一直是开发者与用户之间的微妙博弈。过于频繁的权限请求会引发用户反感&#xff0c;而缺乏透明度的权限获取又可能导致应用商店审核失败。如何在uniApp框架下构…...

编程新知 2026/4/8 17:21:16

Flutter 响应式设计：构建适配多设备的应用

Flutter 响应式设计&#xff1a;构建适配多设备的应用掌握 Flutter 响应式设计的高级技巧&#xff0c;创建适配不同屏幕尺寸的应用。一、响应式设计概述 作为一名追求像素级还原的 UI 匠人&#xff0c;我对 Flutter 响应式设计有着深入的研究。响应式设计是现代应用开发的重要组…...

编程新知 2026/4/8 17:19:15

3秒搞定百度网盘提取码：baidupankey智能工具完全使用指南

3秒搞定百度网盘提取码&#xff1a;baidupankey智能工具完全使用指南 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 还在为百度网盘分享链接的提取码而烦恼吗&#xff1f;每次遇到需要输入提取码的资源&#xff0c;你是否都要…...

编程新知 2026/4/8 16:00:47