Django Web实现动态三级联动

前面写了一篇用JavaScript实现省市县动态三级联动的文章：《用JavaScript实现动态省市县三级联动》http://www.linuxidc.com/Linux/2016-02/128123.htm但是里面实现的方法都是在一个页面内的，即省市县的数据都保存在一个html页面中，数据的请求也是在本页面内的，这样的话灵活性不大，我们的需求是，希望把数据保存在服务器，然后在用户每次点击时都可以向服务器请求数据，即需要实现类似下面的逻辑功能：用户点击-->onchange触发事件-->向服务器请求数据-->服务器返回数据-->向当前页面添加数据下面就用Python的Django来实现这个功能。（PS：有关Django平台如何部署和搭建，这里就不多说了，大家可以看看《Django Book》，我之前在网上找过很多资料，网友写的或是一些其他书籍，都没有《Django Book》讲得细致和透彻，所以是强烈推荐！）--------------------------------------------------------------------------------1.平台环境操作系统：Windows 7 64位开发环境：Eclipse PyDev--------------------------------------------------------------------------------2.文件夹结构直接看下面的图片：目前很多文件还用不上，在创建Django的项目时或app时，很多文件都是自动生成的，下面会说一说可以用得上的文件。--------------------------------------------------------------------------------3.主要功能文件与代码（1）MapPro/settings.py
目前主要是用来设置statics和templates，告诉Django这两个目录的存在路径，添加的代码如下：
TEMPLATE_DIRS = （
os.path.join（BASE_DIR,"templates"）,
）

STATICFILES_DIRS = （
os.path.join（BASE_DIR,"statics"）,
）（2）MapPro/urls.py
设置url路径和views视图函数的映射关系，全部代码如下：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
视图函数文件，用来处理业务逻辑，全部代码如下：
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文件，代码如下：<！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服务器的，用户的每一次点击都会触发一个事件，从而向服务器请求数据。就不多说了，有兴趣的朋友可以试一试！Django1.8返回json字符串和接收post的json字符串内容 http://www.linuxidc.com/Linux/2015-07/120226.htm如何使用 Docker 组件开发 Django 项目？ http://www.linuxidc.com/Linux/2015-07/119961.htmUbuntu Server 12.04 安装Nginx+uWSGI+Django环境 http://www.linuxidc.com/Linux/2012-05/60639.htm Django+Nginx+uWSGI 部署 http://www.linuxidc.com/Linux/2013-02/79862.htm Django实战教程 http://www.linuxidc.com/Linux/2013-09/90277.htm Django Python MySQL Linux 开发环境搭建 http://www.linuxidc.com/Linux/2013-09/90638.htm Django 的详细介绍：请点这里
Django 的下载地址：请点这里本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-02/128124.htm