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├── 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…...
基于Netty实现WebSocket服务端
本文基于Netty实现WebSocket服务端,实现和客户端的交互通信,客户端基于JavaScript实现。 在【WebSocket简介-CSDN博客】中,我们知道WebSocket是基于Http协议的升级,而Netty提供了Http和WebSocket Frame的编解码器和Handler&#…...
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最新python豆瓣电影数据爬虫+可视化分析项目
项目介绍 【开源】项目基于pythonpandasflaskmysql等技术实现豆瓣电影数据获取及可视化分析展示,觉得有用的朋友可以来个一键三连,感谢!!! 项目演示 【开源】2024最新python豆瓣电影数据爬虫可视化分析项目 项目截图…...
[JDK工具-5] jinfo jvm配置信息工具
文章目录 1. 介绍2. 打印所有的jvm标志信息 jinfo -flags pid3. 打印指定的jvm参数信息 jinfo -flag InitialHeapSize pid4. 启用或者禁用指定的jvm参数 jinfo -flags [|-]HeapDumpOnOutOfMemoryError pid5. 打印系统参数信息 jinfo -sysprops pid6. 打印以上所有配置信息 jinf…...
【Linux系统编程】进程概念、进程排队、进程标识符、进程状态
目录 什么是进程? 浅谈进程排队 简述进程属性 进程属性之进程标识符 进程操作之进程创建 初识fork fork返回值 原理角度理解fork fork的应用 进程属性之进程状态 再谈进程排队 进程状态 运行状态 阻塞状态 挂起状态 Linux下的进程状态 “R”(运行状…...
Java与GO语言对比分析
你是不是总听到go与java种种对比,其中在高并发的服务器端应用场景会有人推荐你使用go而不是 java。 那我们就从两者运行原理和基本并发设计来对比分析,看看到底怎么回事。 运行原理对比 java java 中 jdk 已经帮我们屏蔽操作系统区别。 只要我们下载并…...
Linux文件系统原理
Linux文件系统 冯诺依曼在1945年提出计算机的五大组成部分 运算器:CPU 控制器:CPU 存储器:内存和硬盘 输入设备:鼠标、硬盘 输出设备:显示器一、硬盘结构 机械硬盘结构 扇区:硬盘的最小存储单位ÿ…...
初识Spring Cache:如何简化你的缓存处理?
文章目录 1、Spring Cache介绍2、 常用注解3、 使用案例 1、Spring Cache介绍 Spring Cache 是一个框架,实现了基于注解的缓存功能,只需要简单地加一个注解,就能实现缓存功能。 Spring Cache 提供了一层抽象,底层可以切换不同的…...
攻防世界[GoodRe]
攻防世界[GoodRe] 学到知识: 逆向的精髓:三分懂,七分蒙。TEA 算法快速识别(蒙): 数据处理的形式:进入加密时的数据和加密结束后的数据,处理时数据的分组等等,都能用来…...
IntelliJ IDEA实用插件:轻松生成时序图和类图
IntelliJ IDEA生成时序图、类图 一、SequenceDiagram1.1 插件安装1.2 插件设置1.3 生成时序图 二、PlantUML Integration2.1 插件安装2.2 插件设置2.3 生成类图 在软件建模课程的学习中,大家学习过多种图形表示方法,这些图形主要用于软件产品设计。在传统…...
SpringBoot + Mybatis-Plus中乐观锁实现
悲观锁 悲观锁是一种悲观思想,它认为数据很可能会被别人所修改 所以总会对数据进行上锁,读操作和写操作都会上锁,性能较低,使用较少! 乐观锁 乐观锁是一种乐观思想,它认为数据并不一定会被别人所修改 所以…...
设计模式深度解析:分布式与中心化,IT界两大巨头“华山论剑”
🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》《MYSQL应用》 💪🏻 制定明确可量化的目标,坚持默默的做事。 ✨IT界的两大巨头交锋✨ 👋 在IT界的广阔天地中,有两座…...
转行一年了
关注、星标公众号,直达精彩内容 ID:技术让梦想更伟大 整理:李肖遥 来公司一年了。 说是转行其实还是在半导体行业,熟悉我的朋友知道 ,我在18年开始进入半导体行业,那个时候想着行业很重要,站对了…...
【LeetCode 151】反转字符串中的单词
1. 题目 2. 分析 这题要是用Python写,就非常简单了。 3. 代码 class Solution:def reverseWords(self, s: str) -> str:s " ".join(reversed(s.strip().split()))return s...
Behind the Code:Polkadot 如何重塑 Web3 未来
2024 年 5 月 17 日 Polkadot 生态 Behind the Code 第二季第一集 《创造 Web3 的未来》正式上线。第一集深入探讨了 Polkadot 和 Web3 技术在解决数字身份、数据所有权和去中心化治理方面的巨大潜力。 🔍 查看完整视频: https://youtu.be/_gP-M5nUidc?…...
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;}中间留一些空格,是因为ms在调试的时候,尤其是模板比较多的时候,经常断点的行号有问题。比如第5行的断点&…...
【Linux】Linux的基本指令_2
文章目录 二、基本指令8. man9. nano 和 cat10. cp11. mv12. echo 和 > 和 >> 和 <13. more 和 less14. head 和 tail 和 | 未完待续 二、基本指令 8. man Linux的命令有很多参数,我们不可能全记住,我们可以通过查看联机手册获取帮助。访问…...
Effective C++(3)
3.资源管理 条款13:以对象管理资源 以对象管理资源对于传统的堆资源管理,我们需要使用成对的new和delete,这样若忘记delete就会造成内存泄露。因此,我们应尽可能以对象管理资源,并采用RAII(Resource Acqu…...
自定义RedisTemplate序列化器
大纲 RedisSerializerFastJsonRedisSerializer自定义二进制序列化器总结代码 在《RedisTemplate保存二进制数据的方法》一文中,我们将Java对象通过《使用java.io库序列化Java对象》中介绍的方法转换为二进制数组,然后保存到Redis中。实际可以通过定制Red…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
