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

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

news 2025/7/31 7:01:42

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>
http://www.lryc.cn/news/354244.html

相关文章：

  • 基于Netty实现WebSocket服务端
  • 27【Aseprite 作图】盆栽——拆解
  • 【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目
  • [JDK工具-5] jinfo jvm配置信息工具
  • 【Linux系统编程】进程概念、进程排队、进程标识符、进程状态
  • Java与GO语言对比分析
  • Linux文件系统原理
  • 初识Spring Cache：如何简化你的缓存处理？
  • 攻防世界[GoodRe]
  • IntelliJ IDEA实用插件：轻松生成时序图和类图
  • SpringBoot + Mybatis-Plus中乐观锁实现
  • 设计模式深度解析：分布式与中心化，IT界两大巨头“华山论剑”
  • 转行一年了
  • 【LeetCode 151】反转字符串中的单词
  • Behind the Code：Polkadot 如何重塑 Web3 未来
  • for循环里如果std::pair的类型写不对，可能会造成性能损失
  • 【Linux】Linux的基本指令_2
  • Effective C++（3）
  • 自定义RedisTemplate序列化器
  • Flutter 中的 CupertinoContextMenuAction 小部件：全面指南
  • Element-Ul快速入门
  • Django的模型层——2模型实例
  • Python筑基之旅-MySQL数据库(四)
  • OceanBase SQL 诊断和调优实践——【DBA从入门到实践】第七期
  • C++之std::is_trivially_copyable(平凡可复制类型检测)
  • 宝石收集，tarjan
  • python 面对对象 类 继承
  • Rust腐蚀怎么用服务器一键开服联机教程
  • 公共代理IP和独享代理IP之间的区别？
  • 基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践