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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/16364.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

HTTP的由来以及发展史

HTTP的由来以及发展史

HTML&HTML5的学习探索 01、Html的由来和发展史 01-01、Html的由来 HTML的英文全称是 Hypertext Marked Language&#xff0c;即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee&#xff08;蒂姆伯纳斯李&#xff09;于1990年创立的一种标记语言&#xff0c; 他是万…
阅读更多...
Sip协议(一)

Sip协议(一)

Sip协议(一) 本文主要介绍sip协议 1: 简介 ​ SIP&#xff08;Session Initiation Protocol&#xff0c;会话发起协议&#xff09;是一种应用层协议&#xff0c;它被广泛应用于VoIP&#xff08;Voice over Internet Protocol&#xff0c;互联网语音通信&#xff09;中。 ​…
阅读更多...
返回枚举类给前端

返回枚举类给前端

1. 前言 在实际开发过程中&#xff0c;前端的下拉框或者单选按钮的内容通常的需要和后端匹配的&#xff0c;故一般会由后端将下拉框的内容或单选框的内容传给前端&#xff0c;而这些内容在后端一般是由枚举类存储的&#xff0c;如果后端直接返回枚举类&#xff0c;返回结果将会…
阅读更多...
K-means聚类算法详细介绍

K-means聚类算法详细介绍

目录 &#x1f349;简介 &#x1f348;K-means聚类模型详解 &#x1f348;K-means聚类的基本原理 &#x1f348;K-means聚类的算法步骤 &#x1f348;K-means聚类的优缺点 &#x1f34d;优点 &#x1f34d;缺点 &#x1f348;K-means聚类的应用场景 &#x1f348;K-mea…
阅读更多...
SQL Server2019安装步骤教程(图文)_最新教程

SQL Server2019安装步骤教程(图文)_最新教程

一、下载SQL Server2019 1.到微软官网下载SQL Server Developer版本&#xff0c;官网当前的2019版本下载需要注册账号。 不想注册的朋友&#xff0c;可以选择从网盘下载&#xff1a;点击此处直接下载 2.下载之后先解压&#xff0c;解压后执行exe安装程序。打开之后的界面如下…
阅读更多...
学 Java 具体能干什么？

学 Java 具体能干什么？

学习 Java 后&#xff0c;你可以从事许多不同的工作和项目&#xff0c;涵盖了广泛的应用领域。以下是一些具体的应用场景和工作方向&#xff1a; 1. 企业级应用开发 Java 是企业级应用开发的首选语言之一&#xff0c;特别适合开发大规模、分布式、多层次的企业应用程序。 Jav…
阅读更多...
在UbuntuLinux系统上安装MySQL和使用

在UbuntuLinux系统上安装MySQL和使用

前言 最近开始计划在Ubuntu上写一个webserver的项目&#xff0c;看到一些比较好的类似的项目使用了MySQL&#xff0c;我就打算先把环境搞好跑一下试试&#xff0c;方便后面更进一步的学习。其实在本机windows上我已经有一个mysql&#xff0c;不过 在Unbuntu上安装MySQL 首先…
阅读更多...
ai - RAG

ai - RAG

RAG & web <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>ChatGPT 应用页面</title><…
阅读更多...
1960-2022年世界银行WDI面板数据（1400+指标）

1960-2022年世界银行WDI面板数据（1400+指标）

1960-2022年世界银行WDI面板数据&#xff08;1400指标&#xff09; 1、时间&#xff1a;1960-2022年 2、来源&#xff1a;世界银行WDI 指标&#xff1a;包括健康、公共部门、农业与农村发展、城市发展、基础设施、外债、性别、援助效率、教育、气候变化、环境、社会保护与劳…
阅读更多...
【Python】机器学习中的过采样和欠采样：处理不平衡数据集的关键技术

【Python】机器学习中的过采样和欠采样：处理不平衡数据集的关键技术

原谅把你带走的雨天 在渐渐模糊的窗前 每个人最后都要说再见 原谅被你带走的永远 微笑着容易过一天 也许是我已经 老了一点 那些日子你会不会舍不得 思念就像关不紧的门 空气里有幸福的灰尘 否则为何闭上眼睛的时候 又全都想起了 谁都别说 让我一个人躲一躲 你的承诺 我竟然没怀…
阅读更多...
【Vue2入门技能树】：Vue2项目从入门到放弃所遇到的问题汇总

【Vue2入门技能树】：Vue2项目从入门到放弃所遇到的问题汇总

1、body中自带 margin: 8px 的问题 解决办法&#xff1a;在 public 目录下的 index.html 中加入如下样式即可 <style>* {margin: 0;} </style>2、使用vue-router、vuex ①在项目所在文件夹下打开 cmd 终端&#xff0c;然后运行如下代码&#xff0c;等待安装 //…
阅读更多...
【Python从入门到进阶】55、使用Python轻松操作Mysql数据库

【Python从入门到进阶】55、使用Python轻松操作Mysql数据库

一、引言 1、MySQL数据库简介 MySQL是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它使用了一种名为Structured Query Language&#xff08;SQL&#xff09;的查询语言来管理数据。MySQL因其高性能、可扩展性、易用性和稳定性而广受欢迎&#x…
阅读更多...
ARM+FPGA+NVIDIA AI摄像头软硬件定制

ARM+FPGA+NVIDIA AI摄像头软硬件定制

拥有资深ISP图像技术团队&#xff0c;是英伟达、地平线等合作伙伴&#xff0c;我们的团队掌握目前市面上大部分车载平台的ISP图像画质服务能力&#xff0c;能自主开发图像ISP和增强算法。我们具有多名经验丰富光学设计专家&#xff0c;掌握车载模组光学设计能力&#xff0c;资深…
阅读更多...
[蓝桥杯 2020 省 A1] 超级胶水

[蓝桥杯 2020 省 A1] 超级胶水

一.题目 题目描述 小明有 n 颗石子&#xff0c;按顺序摆成一排。 他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量&#xff0c;如果将两颗石子粘在一起&#xff0c;将合并成一颗新的石子&#xff0c;重量是这两颗石子的重量之和。 为了保证石子粘贴牢固&#xff0…
阅读更多...
AutoMQ 社区双周精选第十期

AutoMQ 社区双周精选第十期

本期概要 欢迎来到 AutoMQ 第十期双周精选&#xff01;在过去两周里&#xff0c;主干动态方面&#xff0c;AutoMQ 发布了 1.0.5 版本&#xff0c;该版本将默认日志滚动方式从小时滚动切换到大小滚动&#xff0c;且优化了大规模对象删除的性能。另外&#xff0c;AutoBalancing …
阅读更多...
入门五（项目介绍及登录需求）

入门五（项目介绍及登录需求）

软件缺陷判定标准 项目中缺陷的管理流程 使用Excel对于缺陷进行管理 使用工具管理缺陷 一、项目背景 传智作为一个IT教育机构&#xff0c;拥有自己开发且实际运营的产品&#xff1b; 将开发和运营的技术作为授课的内容&#xff0c;对于学员而言学到的都是一手的真实案例和…
阅读更多...
.net 框架基础(二) 日期和时间

.net 框架基础(二) 日期和时间

总目录 C# 语法总目录 .net 框架基础 二 日期和时间 日期和时间1. TimeSpan2. DateTime 日期和时间 System空间下有三个不可变的结构体进行事件表示:DateTime、DateTimeOffset、TimeSpan 1. TimeSpan 创建TimeSpan方法&#xff1a; 通过构造器通过调用其中一个静态 From ……
阅读更多...
VPP FIB路径链表环路检查

VPP FIB路径链表环路检查

对于路径链表中的三种路径类型&#xff1a; FIB_PATH_TYPE_RECURSIVE FIB_PATH_TYPE_ATTACHED_NEXT_HOP FIB_PATH_TYPE_ATTACHED在添加新的路径时需要进行路径环路检查。函数fib_path_list_recursive_loop_detect会被反复调用。 static void fib_entry_recursive_loop_detect…
阅读更多...
MySQL-数据库设计规范

MySQL-数据库设计规范

1、范式 1.1、概述 在关系型数据库中&#xff0c;关于数据表设计的基本原则、规则就称为范式常见六种范式&#xff0c;按照范式级别由低到高如下所示&#xff1a; 第一范式第二范式第三范式巴斯范式第四范式第五范式 1.2、键和相关属性 范式的定义会用法主键和候选键&…
阅读更多...
llllllllll

llllllllll

llllllllllllllll
阅读更多...
最新文章

Copyright @ 2022~2023