django实现省市县三级联动

最新推荐文章于 2021-08-05 14:36:22 发布
最新推荐文章于 2021-08-05 14:36:22 发布
阅读量763 收藏 3
点赞数
文章标签： python 数据库 开发工具

1.创建项目和应用后，首先在settings.py文件中配置mysql数据库，并创建数据库[省市区的sql文件，网上很多]

2.创建models模型，进行数据迁移

3.创建template模板文件area1.html

4.进行urls路由配置

5.编辑views视图函数

1.modles.py

class AreaInfo(models.Model):
    atitle = models.CharField(max_length=30)  
    aParent = models.ForeignKey('self', null=True, blank=True)

2.urls.py 

from django.conf.urls import url
from . import views
urlpatterns=[
    url(r'^area1/$', views.area1),
    url(r'^province/$', views.province),
    url(r'^city_(\d+)/$', views.city),
    url(r'^county_(\d+)/$', views.county),
]

3.views.py

from django.shortcuts import render
from .models import AreaInfo
from django.http import HttpResponse, JsonResponse

def area1(request):
    return render(request, 'booktest/area1.html')


# 获取省数据
def province(request):
    provinceList = AreaInfo.objects.filter(aParent__isnull=True)
    list1 = []
    for item in provinceList:
        list1.append([item.id, item.atitle])
    return JsonResponse({'data': list1})


# 获取市数据
def city(request, pid):
    print(pid)
    cityList = AreaInfo.objects.filter(aParent_id=pid)
    list1 = []
    for item in cityList:
        list1.append([item.id, item.atitle])
    return JsonResponse({'data': list1})


# 获取区县数据
def county(request, pid):
    print(pid)
    countyList = AreaInfo.objects.filter(aParent_id=pid)
    list1 = []for item in countyList:
        list1.append([item.id, item.atitle])
    return JsonResponse({'data': list1})

4.area.html

<html>
<head>
    <title>省市区列表</title>
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //获取所有省份
            $.get('/province/', function (dic) {
                pro = $('#pro')
                $.each(dic.data, function (index, item) {
                    pro.append('<option value=' + item[0] + '>' + item[1] + '</option>');
                })
            })
            //获取市信息
            $('#pro').change(function () {
                $.get('/city_' + $(this).val() + '/', function (dict) {
                    city = $('#city');
                    city.empty().append('<option value="">请选择市</option>');
                    $('#county').empty().append('<option value="">请选择区县</option>');
                    $.each(dict.data, function (index, item) {
                        city.append('<option value=' + item[0] + '>' + item[1] + '</option>');
                    })
                });
            });

            //获取区县信息
            $('#city').change(function () {
                $.get('/county_' + $(this).val() + '/', function (dict) {
                    county = $('#county');
                    county.empty().append('<option value="">请选择区县</option>');
                    $.each(dict.data, function (index, item) {
                        county.append('<option value=' + item[0]+ '>' + item[1] + '</option>');
                    })
                })
            });
        })

    </script>
</head>
<body>
<select id="pro">
    <option value="">请选择省</option>
</select>
<select id="city">
    <option value="">请选择市</option>
</select>
<select id="county">
    <option value="">请选择区县</option>
</select>
</body>
</html>

5.setting.py配置mysql数据库

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': "area",
        'HOST': "127.0.0.1",
        'PORT': 3306,
        'USER': "root",
        'PASSWORD': '123456',
    }
}

 

weixin_33918357
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
归纳记录总结在Django网站开发过程中如何设计实现类似于省市区的三级联动功能
73
04-20 425
功能需求介绍： 在网站开发的过程中，难免会遇到类似于"省市区"这样的多级联动的下拉框的功能存在，比如在电商的网站开发中，用户购买了东西需要填写收货地址这样的情况。为了给用户提供一个比较方便比较好的体验感，很多网站都采用了三级联动这样的一个效果，也就是当用户选择了某一个省份之后，再去选择市的时候，市的那个下拉框只会弹出属于这个省下的市，而不会出现别的省份的市。 那么接下来就来聊一聊，在我的电商的项目中是如何去实现这样的一个功能的。 首先是表结构的设计，这里，我采用的是自关联的方式，将省市区的所有数据都存在一
Django Web实现动态三级联动
weixin_34409703的博客
05-10 227
1.平台环境 操作系统：Windows 7 64位 开发环境：Eclipse PyDev 2.文件夹结构 直接看下面的图片： 目前很多文件还用不上，在创建Django的项目时或app时，很多文件都是自动生成的，下面会说一说可以用得上的文件。 3.主要功能文件与代码 （1）MapPro/settings....
django搭建城市联动，三级联动,ajax实现
Doraemon_meow_meow的博客
05-21 735
citys.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>城市联动</title> </head> <body> <select> <option>--请选...
django-自关联-三级联动的效果
pyhui的技术博客
08-30 716
自关联是特殊的一对多 》省市区县表 》可设计成自关联的模式 序号，名称，上级 创建一个自关联 自关联是一个特殊的一对多 案例-省市区信息查询 布局数据 》布局省的数据 湖北省，湖南省 》布局市的数据 》布局区的数据 布局页面 》布局一个市区列表页 city_list/ 》布局一个市区详情页 city_list/1/ 详情页通过路径上的参数可查不同市的情况 html页面： 显示上级的...
python-Web-django-时间插件-三级联动
donghuichi9301的博客
08-17 247
时间插件： 第一步：下载 https://www.layui.com/laydate/ 下载插件包，放在项目的static 第二步：在html里引入js： <script src="/static/laydate/laydate.js"></script> <!-- 时间插件 --> 引入标签： <input type=...
Django Admin实现三级联动的示例代码(省市区)
09-20
多级菜单在很多上面都有应用，这篇文章主要介绍了Django Admin实现三级联动(省市区)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
django admin 后台实现三级联动的示例代码
12-25
示例项目大概功能，添加一个人物信息，地区通过三级联动选择。 一、项目创建成功后，首先写模型类代码： class AreaInfo(models.Model): """地区模型类""" name = models.CharField(max_length = 50) pid = ...
省市县三级联动
08-31
在实际项目中，"省市县三级联动"往往结合后端框架（如Spring Boot、Django等）和数据库（如MySQL、MongoDB）来实现数据的动态加载。前端库如Vue.js、React或Angular也能提供更高效和便捷的方式来处理这类交互。通过...
省市区三级联动
04-13
在中国的Web应用开发中，"省市区三级联动"是一个常见的功能需求，特别是在电子商务、物流配送、用户信息填写等场景中。这个功能涉及到地理信息的层级结构，即省份、城市（地级市）和区县（区/县级市），通过联动...
三级联动通过AJAX 将后台的数据返回在页面上。 主要是下拉框的联动。
ren2881971的专栏
11-05 456
[code="js"] //根据浏览器的类型创建xmlHttpRequest对象 function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest()){ ...
django实现省市县级联菜单
08-10
利用django实现了省市县的级联下拉。数据库采用的是sqlite。
python django mysql web页面多级联动_django admin 后台实现三级联动的示例代码
weixin_39711867的博客
12-10 246
在刚进公司的时候，要写一个需求，使用django的admin站点管理，实现一个二级联动的功能，因为要用到django自带的页面，因为不是自定义的，不能直接添加js代码。根据我自己的研究简单的记录一下大概步骤。项目创建流程略过，这里使用MySQL数据库和py3为例。示例项目大概功能，添加一个人物信息，地区通过三级联动选择。一、项目创建成功后，首先写模型类代码：class AreaInfo(model...
Django 省、市、区 三级联动 及数据库的地址添加 !!!
The的博客
08-05 1415
应用场景 `淘宝`、`京东`等需要地址的地方 Models.py模型 from django.db import models # Create your models here. class Area(models.Model): name = models.CharField(max_length=128) # related_name反向查询 parent = models.ForeignKey('self',on_delete=models.SET_NULL,rela
Django省市区三级联动
老师好，我是安同学
08-01 1343
1、模型创建（models.py） 自关联，获取下级的名称为next from django.db import models class Area(models.Model): """ 区域表 """ name = models.CharField(max_length=100, verbose_name='名称') parent = models.ForeignKey('self',on_delete=models.SET_NULL,related_na
Django写省市级
xiao-啸
05-07 399
模型类 # 定义地区模型 class AreaInfo(models.Model): # 地区名字 title = models.CharField(max_length=20) # 上级地区 # 关联自己记住这里写self # null：如果为True，Django将空值以NULL存储到数据库中，默认值是False # ...
在django中实现省市区三级联动，数据是json格式的
qq_42508689的博客
08-03 1567
在django上省市区三级联动，先找到全国的省市区名的数据，如下图：                   把数据放在django项目中templates文件中，这样前端页面发起请求就可以直接拿到数据。我前端如下: &lt;label&gt;所在地區&lt;/label&gt;&lt;br&gt;        &lt;select name="sheng" id="sh...
Django实战: 利用Ajax生成联动下拉菜单
大江狗
06-05 5266
联动下拉菜单是Web开发中一个被经常使用的应用。比如当你从一个列表从选择一个国家的时候，联动下拉菜单会同步显示属于该国家所有城市列表供用户选择。今天我们就教你如何使用Django+Ajax生成联动下拉菜单。本案例使用Django 2.0 + Python 3.X开发，无需使用第三方安装包。第一步创建APP，修改设置文件创建一个叫dropdown的APP，并把它加到项目设置文件settings.py...
python自关联_Django自关联实现多级联动查询实例
weixin_39957934的博客
12-08 689
1 问题引出我们在开发网站的时候可能会遇到这种情况，多个字段之间有一定的关联性，比如省市县，选择省，之后下一个选择框的值则为该省的市集合，选择市之后下一个选择框的值为该市的县集合。一种实现方式是，建立三个模型表，用外键一对多方式，显然这样是不太合理的。Django提供了自关联的实现，模型自身关联，即一条数据关联另一条数据。本文以省市县为案例介绍其具体实现方法。2 具体实现2.1 建立数据表Mode...
Django实现省市县级联菜单
weixin_38383877的博客
08-10 3422
1、创建工程mymenu和项目menu。 2、改变mymenu中setting.py的DIRS，STATICFILES_DIRS 'DIRS': [BASE_DIR + "/templates"], #后面若无数据，不可以加逗号 STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), ) 3、在menu中建立views.py...
django 三级联动
最新发布
06-07
三级联动是指在一个页面中有三个下拉框，第一个下拉框选择了某个选项后，第二个下拉框会根据第一个下拉框的选项进行动态加载选项，选择第二个下拉框后，第三个下拉框同样会根据第二个下拉框的选项进行动态加载选项。在 Django 中实现三级联动可以通过 Ajax 和视图函数的配合来实现。 首先，在前端页面中，需要使用 JavaScript 或 jQuery 实现下拉框的动态加载，并且需要使用 Ajax 向后端发送请求获取下拉框的选项。 然后，在 Django 的视图函数中，根据 Ajax 发送的请求获取相应的选项，并将选项返回给前端页面，以供 JavaScript 或 jQuery 进行动态加载。 最后，在 Django 的路由中，需要将视图函数与 Ajax 请求的 URL 进行映射，以便 Ajax 请求能够正确地到达视图函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值