用Django做一个省份选择器

做一个省份选择器

使用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')