Django Web实现动态三级联动-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Django Web实现动态三级联动

简介:

1.平台环境

    操作系统:Windows 7 64位

    开发环境:Eclipse PyDev




2.文件夹结构

    直接看下面的图片:

wKioL1ZULlvhko5KAAAz8NPmbRw173.png

    目前很多文件还用不上,在创建Django的项目时或app时,很多文件都是自动生成的,下面会说一说可以用得上的文件。




3.主要功能文件与代码


(1)MapPro/settings.py

    目前主要是用来设置statics和templates,告诉Django这两个目录的存在路径,添加的代码如下:

1
2
3
4
5
6
7
TEMPLATE_DIRS = (
                 os.path.join(BASE_DIR,'templates'),
                 )
 
STATICFILES_DIRS = (
                    os.path.join(BASE_DIR,'statics'),
                    )


(2)MapPro/urls.py

    设置url路径和views视图函数的映射关系,全部代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from django.conf.urls import patterns, include, url
from django.contrib import admin
from app01 import views
 
urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'MapPro.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),
 
    url(r'^admin/', include(admin.site.urls)),
    url(r'^map/$',views.Map),
    (r'^GetCityData/$',views.Return_City_Data),
    (r'^GetCountryData/$',views.Return_Country_Data),
)


(3)app01/views.py

    视图函数文件,用来处理业务逻辑,全部代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
from django.shortcuts import render,render_to_response
from django.http import HttpResponse
from django.core.context_processors import request
import json
 
# Create your views here.
 
def Map(request):
    return render_to_response("map.html")
    #return HttpResponse("Hello!")
     
Place_dict = {
        "GuangDong":{
                        "GuangZhou":["PanYu","HuangPu","TianHe"],
                        "QingYuan":["QingCheng","YingDe","LianShan"],
                        "FoShan":["NanHai","ShunDe","SanShui"]
                        },
        "ShanDong":{
                        "JiNan":["LiXia","ShiZhong","TianQiao"],
                        "QingDao":["ShiNan","HuangDao","JiaoZhou"]
                        },
        "HuNan":{
                        "ChangSha":["KaiFu","YuHua","WangCheng"],
                        "ChenZhou":["BeiHu","SuXian","YongXian"]
                    }
    };
def Return_City_Data(request):
    province = request.GET['Province']
    print province
    City_list = []
    for city in Place_dict[province]:
        City_list.append(city)
    return HttpResponse(json.dumps(City_list))    
     
def Return_Country_Data(request):
    province,city = request.GET['Province'],request.GET['City']
    print province,city
    Country_list = Place_dict[province][city]
    return HttpResponse(json.dumps(Country_list))

    这里的代码比较简单,就不写注释了。


(4)templates/map.html

    templates目录主要用来放置页面的模板文件,这里我只创建map.html文件,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三级联动测试</title>
    <script src="/static/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        //用来获得option元素中selected属性为true的元素的id
        function Get_Selected_Id(place){
            var pro = document.getElementById(place);
            var Selected_Id = pro.options[pro.selectedIndex].id;
//            console.log("Get_Selected_Id:"+Selected_Id);  //测试使用
            return Selected_Id;         //返回selected属性为true的元素的id
        }
 
        //执行相应的动作,调用相关数据请求函数
        function Get_Next_Place(This_Place_ID,Action){
            var Selected_Id = Get_Selected_Id(This_Place_ID);   //Selected_Id用来记录当前被选中的省或市的ID
            if(Action=='Get_city')                            //从而可以在下一个级联中加载相应的市或县
                Get_City_Data(Selected_Id);
            else if(Action=='Get_country')
                Get_Country_Data(Selected_Id);
        }
 
        //向服务器请求城市列表数据并调用添加城市函数
        function Get_City_Data(Province_Selected_Id){    //这里的Selected_Id应该是被选中的省份的ID
//            console.log("Province_Selected_Id:"+Province_Selected_Id);   //测试使用
            if(Province_Selected_Id == 'Not_data1'){    //如果选择了"Province"选项,则表示重置当前City和Country的选项内容,不会向服务器请求数据
                $("#city").empty();
                $("#city").append("<option id='Not_data2'>City</option>");
                $("#country").empty();
                $("#country").append("<option id='Not_data3'>Country</option>");
            }else{      //否则就会向服务器请求数据
                $.getJSON('/GetCityData/',{'Province':Province_Selected_Id},function(City_list){
//                    console.log(City_list);      //测试使用
                    Add_city(City_list);    //调用添加城市选项函数
                });
            }
        }
 
        //在当前页面添加城市选项
        function Add_city(City_list){
            $("#city").empty();
            $("#city").append("<option id='Not_data2'>City</option>");
            $("#country").empty();
            $("#country").append("<option id='Not_data3'>Country</option>");
            //上面的两次清空与两次添加是为了保持级联的一致性
            for(var index in City_list){     //获得城市列表中的城市索引
                //添加内容的同时在option标签中添加对应的城市ID
                var text = "<option"+" id='"+City_list[index]+"'>"+City_list[index]+"</option>";
                $("#city").append(text);
                console.log(text);  //用来观察生成的text数据
            }
        }
 
        //向服务器请求县区列表数据并调用添加县区函数
       function Get_Country_Data(City_Selected_Id){
//           console.log("City_Selected_Id:"+City_Selected_Id);   //测试使用
           if(City_Selected_Id == 'Not_data2'){     //如果选择了City选项,则表示重置当前Country的选项内容,不会向服务器请求数据
               $("#country").empty();
               $("#country").append("<option id='Not_data3'>Country</option>");
               //上面的清空与添加是为了保持级联的一致性
           }else{   //否则就会向服务器请求数据
               var Province_Selected_ID = Get_Selected_Id("province");  //获得被选中省的ID,从而方便从服务器中加载数据
               $.getJSON('/GetCountryData/',{'Province':Province_Selected_ID,'City':City_Selected_Id},function(Country_list){
//                   console.log(Country_list);    //测试使用
                   Add_country(Country_list);   //调用添加县区选项函数
               });
           }
        }
 
        //在当前页面添加县区选项
        function Add_country(Country_list){
            $("#country").empty();
            $("#country").append("<option id='Not_data3'>Country</option>");
            //上面的清空与添加是为了保持级联的一致性
            for(var index in Country_list){     //获得县区列表中的县区索引
                //添加内容的同时在option标签中添加对应的城市ID
                var text = "<option"+" id='"+Country_list[index]+"'>"+Country_list[index]+"</option>";
                $("#country").append(text);
                console.log(text);  //用来观察生成的text数据
            }
        }
 
    </script>
</head>
<body>
    <p>您的收货地址:</p>
    <select id="province" onchange="Get_Next_Place('province','Get_city')">
        <option id="Not_data1">Province</option>
        <option id="GuangDong" value="GuangDong">GuangDong</option>
        <option id="ShanDong" value="ShanDong">ShanDong</option>
        <option id="HuNan" value="HuNan">HuNan</option>
    </select>
    <select id="city" onchange="Get_Next_Place('city','Get_country')">
        <option id="Not_data2">City</option>
    </select>
    <select id="country">
        <option id="Not_data3">Country</option>
    </select>
    <br/>
</body>
</html>

    这里的代码相对前面的就有点多,主要是因为在省市县的级联关系、数据的请求与添加上,需要进行相关的逻辑判断,当然,仔细分析,这里的很多代码都可以合并,时间关系,就不进行重构了。




4.测试与实现

    最终的结果是跟前面写的那篇文章一样的,只是不同的是,这里的数据都是来自Web服务器的,用户的每一次点击都会触发一个事件,从而向服务器请求数据。

    就不多说了,有兴趣的朋友可以试一试!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: