Django Web实现动态三级联动

前面写了一篇用JavaScript实现省市县动态三级联动的文章：

《用JavaScript实现动态省市县三级联动》http://xpleaf.blog.51cto.com/9315560/1716190

但是里面实现的方法都是在一个页面内的，即省市县的数据都保存在一个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 viewsurlpatterns = 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 provinceCity_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,cityCountry_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的元素的idfunction 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用来记录当前被选中的省或市的IDif(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标签中添加对应的城市IDvar 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标签中添加对应的城市IDvar 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" οnchange="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" οnchange="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服务器的，用户的每一次点击都会触发一个事件，从而向服务器请求数据。

就不多说了，有兴趣的朋友可以试一试！

转载于:https://blog.51cto.com/xpleaf/1716482

Django Web实现动态三级联动相关推荐

web 端省市区三级联动选择框
web 端省市区三级联动选择框 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
Django积木块八——三级联动
三级联动前端需要的效果,省之后市之后现,创建model,查询所有的省的信息,json传到前面,之后通过省的id找到对应的市,是用异步实现的. # model class Sheng(models.M ...
用JavaScript实现动态省市县三级联动
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: <!DOCTYPE ht ...
DJANGO后台ADMIN下拉三级联动，纯JS，没有AJAX数据库回显，目前为止最简单的做法
网上有很多的DJANGO下拉三级联动,但是都涉及到数据库回显数据操作,操作复杂,本例子是把下拉数据写在JS中,很简单,不需要修改后台太多文件,最下面是一个正常的HTML下拉三级联动文件,我们在这个文件 ...
Django实现xadmin后台二级联动、三级联动（提供另一种实现方式）
目录一.先看下app文件目录二.编写models.py样例三.确定二级数据和js内容 1.编写路由urls.py 2.views传递数据,json格式 3.定制js文件四.在adminx.py ...
java省市县联动下拉框选择_原生JavaScript实现动态省市县三级联动下拉框菜单实例代码...
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做 ...
【web前端性能优化】13.城市三级联动
最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示: pay.html < ...
下拉框三级联动，数据库动态获取数据（springboot+ajax+html+mybatis）
效果展示数据库设计第一级数据库设计第二级数据库设计第三级数据库设计都使用code来链接上一级!!! 前端 <select id="petType" name=&qu ...
jquery实现省市区三级联动
jquery实现省市区三级联动最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是 ...

Django Web实现动态三级联动

Django Web实现动态三级联动相关推荐

最新文章

热门文章