歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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.htm

Ubuntu 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 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved