做一个省份选择器

使用django做后端, mysql数据库, jQuery

列出结构主要的文件, 其它配置比较简单

  • models.py

    因为所有数据的结构基本一致, 把所有省份, 市和区全部存储一张表, 实现表的自连接
from django.db import models

class Pro(models.Model):

    name = models.CharField(max_length=200)

    parent = models.ForeignKey('self', null=True, blank=True)


mysql> desc selCity_pro;

+-----------+--------------+------+-----+---------+----------------+

| Field     | Type         | Null | Key | Default | Extra          |

+-----------+--------------+------+-----+---------+----------------+

| id        | int(11)      | NO   | PRI | NULL    | auto_increment |

| name      | varchar(200) | NO   |     | NULL    |                |

| parent_id | int(11)      | YES  | MUL | NULL    |                |

+-----------+--------------+------+-----+---------+----------------+

3 rows in set (0.00 sec)

mysql>

插入数据类似这种

INSERT INTO `selCity_pro` VALUES ('110000', '北京市', null);

INSERT INTO `selCity_pro` VALUES ('110100', '东城区', '110000');

INSERT INTO `selCity_pro` VALUES ('110200', '西城区', '110000');

INSERT INTO `selCity_pro` VALUES ('110500', '朝阳区', '110000');

INSERT INTO `selCity_pro` VALUES ('110600', '丰台区', '110000');

INSERT INTO `selCity_pro` VALUES ('110700', '石景山区', '110000');

INSERT INTO `selCity_pro` VALUES ('110800', '海淀区', '110000');

......
  • 模板

index.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>首页</title>

    <script src="/static/js/jquery-2.1.4/jquery.min.js"></script>

    <script>

        $(function(){

            $.get('/pro', function(data){

                con = $('#province');

                $.each(data, function(index, item){

                    con.append("<option value='"+item.id+"'>"+item.name+"</option>")

                });

            });

            $('#province').change(function(){

                val1 = $(this).val();

                $.get('/city/'+val1, function(data1){

                    con1 = $('#city');

                    con1.empty();

                    con1.append("<option>选择市</option>");

                    $.each(data1, function(index, item1){

                        con1.append("<option value='"+item1.id+"'>"+item1.name+"</option>")

                    })

                })

            });

            $('#city').change(function(){

                val2 = $(this).val();

                $.get('/area/'+val2, function(data2){

                    con2 = $('#area');

                    con2.empty();

                    con2 = con2.append("<option>选择区</option>");

                    $.each(data2, function(index, item2){

                        con2.append("<option value='"+item2.id+"'>"+item2.name+"</option>")

                    })

                })

            });

        })

    </script>

</head>

<body>

    <select id="province" name="province">

        <option>选择省</option>

    </select>

    <select id="city" name="city">

        <option>选择市</option>

    </select>

    <select id="area" name="area">

        <option>选择区</option>

    </select>

</body>

</html>
  • 视图函数views.py
from django.shortcuts import render

from django.http import HttpResponse

import json

from models import Pro

from django.http import JsonResponse

def index(request):

    return render(request, 'selCity/index.html')

def pro(request):

    pro_objs = Pro.objects.filter(parent__isnull=True)

    info_list = [{'id':pro.id, 'name':pro.name} for pro in pro_objs]

    return HttpResponse(json.dumps(info_list), content_type="application/json")

def city(request, p_id):

    city_objs = Pro.objects.filter(parent=p_id)

    city_list = [{'id':city.id, 'name':city.name} for city in city_objs]

    return HttpResponse(json.dumps(city_list), 'application/json')

def area(request, a_id):

    area_objs = Pro.objects.filter(parent=a_id)

    area_list = [{'id':area.id, 'name':area.name} for area in area_objs]

    return HttpResponse(json.dumps(area_list), 'application/json')

用Django做一个省份选择器的更多相关文章

  1. 自然语言处理NLP学习笔记三：使用Django做一个NLP的Web站点

    前言: 前面我们已经能初步实现一个中文自然处理语言的模型了,但交互界面是命令行的,不太友好. 如果想做一个类似http://xiaosi.trs.cn/demo/rs/demo的界面,那就还需要继续往 ...

  2. WPF 自己做一个颜色选择器

    程序开发过程中,经常会遇到需要支持动态配置主题颜色的问题,通常,一个程序会有多种不同的颜色风格主题供选 有时候,更细致一些的地方,会需要支持自己配置颜色,这样我们就需要一个颜色选择器啦,下面是我自己开 ...

  3. 用Django做一个团队介绍

    所用工具 Pycharm 社区版 Django 2.x Python 3.6.4 总目录 settings中的设置 总的路由设置 templates中的index.html文件 <!DOCTYP ...

  4. Unity3d—做一个年月日选择器（Scroll Rect拖动效果优化）— 无限滚动 + 锁定元素

    最近..... 废话不多说上效果图 用的是UGUI 我先说思路 通过判断元素的位置信息来改变Hierarchy的顺序 实现无限滚动 改变位置的同时也要不断的调整Content的位置防止乱跳 元素锁定就 ...

  5. 利用Django做一个简单的分页页面

    views代码: from django.shortcuts import render from django.conf import settings from booktest.models i ...

  6. 通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）

    一.创建django项目 通过命令创建: django-admin startproject 项目名称 创建app应用 python3 manage.py startapp 应用名 #这里manage ...

  7. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  8. 用Django加PIL做一个证件照模板生成器网页

    最近在整理自己的简历,发现简历上面的ID照有些太老了,所以就准备重新准备一些证件照,刚好最近在弄自己的博客网站,想着直接做一个网页工具出来,直接生成证件照模板,这样还可以省去PS的麻烦.而且照片涉及到 ...

  9. 使用Vue+Django+Ant Design做一个留言评论模块

    使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...

随机推荐

  1. Python 任务队列 Celery

    一. celery 简介 Celery 是一个专注于实时处理和任务调度的分布式任务队列, 同时提供操作和维护分布式系统所需的工具.. 所谓任务就是消息, 消息中的有效载荷中包含要执行任务需要的全部数据 ...

  2. java源码学习（四）ArrayList

    ArrayList ​ ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ​ ArrayList不是线程安全的,只能用在单线程环境下, ...

  3. Oracle数据库web维护客户端管理工具软件

    TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL 等数据库进行维护管理操作. 功能 ...

  4. webpack前端工程化构建工具的使用

    一.模块打包机 1.创建文件 在目标文件下建立一个src文件夹作为js代码区:作为例子,我创建了两个js文件,并利用commonJS规范require引入到index.js中: moduleA.js: ...

  5. if和for的几个经典题目

    1.有一对幼兔,幼兔1个月后长成小兔,小兔1个月后长成成兔并生下一对幼兔,问几年后有多少对兔子,幼兔.小兔.成兔对数分别是多少. 幼兔 1 小兔 0 成兔 0幼兔 0 小兔 1 成兔 0 幼兔 1 小 ...

  6. JQuery实现点击关注和取消功能

    点赞,网络用语,表示“赞同”.“喜爱”. 该网络语来源于网络社区的“赞”功能.送出和收获的赞的多少.赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态.点赞的背后,反映出你自己.与之对应的 ...

  7. 2017CCPC中南地区赛 H题（最长路）

    题目地址:202.197.224.59/OnlineJudge2/ 来自湘潭大学OJ. 这里用到了一个树的直径(树中的最长边)的结论:当你找到一棵树的最长边后,这个树中所有点的最长边必定和这条边的两个 ...

  8. MySQL数据库Raid存储方案

    作为一名DBA,选择自己的数据存储在什么上面,应该是最基本的事情了.但是很多DBA却容易忽略了这一点,我就是其中一个.之前对raid了解的并不多,本文就记录下学习的raid相关知识. 一.RAID的基 ...

  9. Python 迭代器和列表解析

    Python 迭代器和列表解析 1)迭代器 一种特殊的数据结构,以对象形式存在 >>> i1 = l1.__iter__() >>> i1 = iter(l1) 可 ...

  10. CentOS 下搭建FTP服务器

    vsftpd是Linux下比较著名的FTP服务器,搭建FTP服务器当然首选这个.本文介绍了在CentOS 6 4下安装vsftpd.配置虚拟用户登录FTP的过程.正 vsftpd是Linux下比较著名 ...