Django中使用省市聯動模型詳解

本程序實現在Django中使用省市聯動模型，並實現地址值允許輸入一次的效果：

1.前端引入

##html中引入
 {% if request.user.province %}
  <li class=" p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：&nbsp;&nbsp;<input type="text" value="{{request.user.province}}{{request.user.city}}" readonly="readonly"/>
  </li>
  {% else %}
  <li class=" p_infor_city">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
  &nbsp;&nbsp;<select id="province" style="width:140px" name="province">
      <option value="0">--請選擇--</option>
  </select>
  <select id="city" style="width:140px;" name="city">
      <option value="0">--請選擇1--</option>
  </select>
  <script src="{% static 'js/pcld6.js' %}"></script>
  <i class="error-tips"></i>
  </li>
  {% endif %}

#js/pcld6.js
var cityArr = new Array();
var countryArr = new Array();
//省份數組
var provinceArr = ['北京市', '天津市', '上海市', '重慶市', '河北省', '河南省', '雲南省', '遼寧省', '黑龍江省', '湖南省', '安徽省', '山東省', '新疆維吾爾自治區', '江蘇省', '浙江省', '江西省', '湖北省', '廣西壯族自治區', '甘肅省', '山西省', '內蒙古自治區', '陝西省', '吉林省', '福建省', '貴州省', '廣東省', '青海省', '西藏', '四川省', '寧夏回族自治區', '海南省', '臺灣省', '香港特別行政區', '澳門特別行政區'];
//城市數組
cityArr['北京市'] = ['東城區', '西城區', '崇文區', '宣武區', '朝陽區', '豐臺區', '石景山區', '海淀區', '門頭溝區', '房山區', '通州區', '順義區', '昌平區', '大興區', '懷柔區', '平谷區', '密雲縣', '延慶縣'];
cityArr['天津市'] = ['和平區', '河東區', '河西區', '南開區', '河北區', '紅橋區', '塘沽區', '漢沽區', '大港區', '東麗區', '西青區', '津南區', '北辰區',
    '武清區', '寶坻區', '寧河縣', '靜海縣', '薊縣'
];
cityArr['上海市'] = ['黃浦區', '盧灣區', '徐彙區', '長寧區', '靜安區', '普陀區', '閘北區', '虹口區', '楊浦區', '閔行區', '寶山區', '嘉定區', '浦東新區', '金山區',
    '松江區', '青浦區', '南匯區', '奉賢區', '崇明縣'
];
cityArr['重慶市'] = ['萬州區', '涪陵區', '渝中區', '大渡口區', '江北區', '沙坪壩區', '九龍坡區', '南岸區', '北碚區', '萬盛區', '雙橋區', '渝北區', '巴南區', '黔江區', '長壽區', '江津區', '合川區', '永川區', '南川區', '綦江縣', '潼南縣', '銅梁縣', '大足縣', '榮昌縣', '璧山縣', '梁平縣', '城口縣', '豐都縣', '墊江縣', '武隆縣', '忠縣', '開縣', '雲陽縣', '奉節縣', '巫山縣', '巫溪縣', '石柱土家族自治縣', '秀山土家族苗族自治縣', '酉陽土家族苗族自治縣', '彭水苗族土家族自治縣'];
cityArr['河北省'] = ['石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺市', '保定市', '張家口市', '承德市', '滄州市', '廊坊市', '衡水市'];
cityArr['河南省'] = ['鄭州市', '開封市', '洛陽市', '平頂山市', '安陽市', '鶴壁市', '新鄉市', '焦作市', '濟源市', '濮陽市', '許昌市', '漯河市', '三門峽市',
    '南陽市', '商丘市', '信陽市', '周口市', '駐馬店市'
];
cityArr['雲南省'] = ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '麗江市', '思茅市', '臨滄市', '楚雄彝族自治州', '紅河哈尼族彝族自治州', '文山壯族苗族自治州', '西雙版納傣族自治州', '大理白族自治州', '德宏傣族景頗族自治州', '怒江傈僳族自治州', '迪慶藏族自治州'];
cityArr['遼寧省'] = ['瀋陽市', '大連市', '鞍山市', '撫順市', '本溪市', '丹東市', '錦州市', '營口市', '阜新市', '遼陽市', '盤錦市', '鐵嶺市', '朝陽市', '葫蘆島市'];
cityArr['黑龍江省'] = ['哈爾濱市', '齊齊哈爾市', '雞西市', '鶴崗市', '雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七臺河市', '牡丹江市', '黑河市', '綏化市',
    '大興安嶺地區'
];
cityArr['湖南省'] = ['長沙市', '株洲市', '湘潭市', '衡陽市', '邵陽市', '岳陽市', '常德市', '張家界市', '益陽市', '郴州市', '永州市', '懷化市', '婁底市',
    '湘西土家族苗族自治州'
];
cityArr['安徽省'] = ['合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市', '滁州市', '阜陽市', '宿州市', '巢湖市',
    '六安市', '亳州市', '池州', '宣城市'
];
cityArr['山東省'] = ['濟南市', '青島市', '淄博市', '棗莊市', '東營市', '煙臺市', '濰坊市', '濟寧市', '泰安市', '威海市', '日照市', '萊蕪市', '臨沂市', '德州市', '聊城市', '濱州市', '菏澤市'];
cityArr['新疆維吾爾自治區'] = ['烏魯木齊市', '克拉瑪依市', '吐魯番地區', '哈密地區', '昌吉回族自治州 ', '博爾塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克蘇地區',
    '克孜勒蘇柯爾克孜自治州 ', '喀什地區', '和田地區', '伊犁哈薩克自治州', '塔城地區', '阿勒泰地區', '石河子市', '阿拉爾市', '圖木舒克市', '五家渠市'
];
cityArr['江蘇省'] = ['南京市', '無錫市', '徐州市', '常州市', '蘇州市', '南通市', '連雲港市', '淮安市', '鹽城市', '揚州市', '鎮江市', '泰州市', '宿遷市'];
cityArr['浙江省'] = ['杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '台州市', '麗水市'];
cityArr['江西省'] = ['南昌市', '景德鎮市', '萍鄉市', '九江市', '新餘市', '鷹潭市', '贛州市', '吉安市', '宜春市', '撫州市', '上饒市'];
cityArr['湖北省'] = ['武漢市', '黃石市', '十堰市', '宜昌市', '襄樊市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市', '咸寧市', '隨州市',
    '恩施土家族苗族自治州', '仙桃市', '潛江市', '天門市', '神農架林區'
];
cityArr['廣西壯族自治區'] = ['南寧市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '欽州市', '貴港市', '玉林市', '百色市', '賀州市', '河池市', '來賓市', '崇左市'];
cityArr['甘肅省'] = ['蘭州市', '嘉峪關市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平涼市', '酒泉市', '慶陽市', '定西市', '隴南市',
    '臨夏回族自治州', '甘南藏族自治州'
];
cityArr['山西省'] = ['太原市', '大同市', '陽泉市', '長治市', '晉城市', '朔州市', '晉中市', '運城市', '忻州市', '臨汾市', '呂梁市'];
cityArr['內蒙古自治區'] = ['呼和浩特市', '包頭市', '烏海市', '赤峯市', '通遼市', '鄂爾多斯市', '呼倫貝爾市', '巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟',
    '阿拉善盟'
];
cityArr['陝西省'] = ['西安市', '銅川市', '寶雞市', '咸陽市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市'];
cityArr['吉林省'] = ['長春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州'];
cityArr['福建省'] = ['福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市'];
cityArr['貴州省'] = ['貴陽市', '六盤水市', '遵義市', '安順市', '銅仁地區', '黔西南布依族苗族自治州', '畢節地區', '黔東南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr['廣東省'] = ['廣州市', '韶關市', '深圳市', '珠海市', '汕頭市', '佛山市', '江門市', '湛江市', '茂名市', '肇慶市', '惠州市', '梅州市', '汕尾市', '河源市', '陽江市', '清遠市', '東莞市', '中山市', '潮州市', '揭陽市', '雲浮市'];
cityArr['青海省'] = ['西寧市', '海東地區', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉樹藏族自治州', '海西蒙古族藏族自治州'];
cityArr['西藏'] = ['拉薩市', '昌都地區', '山南地區', '日喀則地市', '那曲地區', '阿里地區', '林芝地區'];
cityArr['四川省'] = ['成都市', '自貢市', '攀枝花市', '瀘州市', '德陽市', '綿陽市', '廣元市', '遂寧市', '內江市', '樂山市', '南充市', '眉山市', '宜賓市',
    '廣安市', '達州市', '雅安市', '巴中市', '資陽市', '阿壩藏族羌族自治州', '甘孜藏族自治州', '涼山彝族自治州'
];
cityArr['寧夏回族自治區'] = ['銀川市', '石嘴山市', '吳忠市', '固原市', '中衛市'];
cityArr['海南省'] = ['海口市', '三亞市', '五指山市', '瓊海市', '儋州市', '文昌市', '萬寧市', '東方市', '定安縣', '屯昌縣', '澄邁縣', '臨高縣',
    '白沙黎族自治縣', '昌江黎族自治縣', '樂東黎族自治縣', '陵水黎族自治縣', '保亭黎族苗族自治縣', '瓊中黎族苗族自治縣'
];
cityArr['臺灣省'] = ['臺北市', '高雄市', '基隆市', '臺中市', '臺南市', '新竹市', '嘉義市'];
cityArr['香港特別行政區'] = ['中西區', '灣仔區', '東區', '南區', '油尖旺區', '深水埗區', '九龍城區', '黃大仙區', '觀塘區', '荃灣區', '葵青區', '沙田區',
    '西貢區', '大埔區', '北區', '元朗區', '屯門區', '離島區'
];
cityArr['澳門特別行政區'] = ['澳門'];
//區域數組
//countryArr['南京'] = ['1', '2'];
//countryArr['連雲港'] = ['3', '4'];
//countryArr['青島'] = ['5', '6'];
//countryArr['煙臺'] = ['7', '8'];
//countryArr['濟南'] = ['9', '10'];
//alert(countryArr[南京])
var province = document.getElementById('province');
var city = document.getElementById('city');
//var country = document.getElementById('country');
//第一步 new option("文本","值")
//window.οnlοad=creatOption(province,provinceArr);
for (let i in provinceArr) {
    //元素對象.add()添加選項
    province.add(new Option(provinceArr[i], provinceArr[i]))
}

function creatOption(obj, data) {
    for (var i in data) {
        var op = new Option(data[i], data[i]); //創建下拉列表中的option
        obj.add(op); //將選項添加到下拉列表
    }
}
//添加市，省發生變化，市區清空然後循環添加,onchange事件是下拉選項發生變化時觸發
province.onchange = function () {
    city.length = 0; //清空city原有的<option>
    creatOption(city, cityArr[province.value]);
    //city.onchange();
}
//添加區
/*city.onchange = function () {
    country.length = 0; //清空country原有的<option>
    creatOption(country, countryArr[city.value]);
}*/

2.後臺處理

後臺處理時，只允許用戶進行一次地址修改

#forms.py
class UserInfoForm(forms.ModelForm):
    '''個人中心信息第一次修改，可以修改省市信息'''
    class Meta:
        model = UserProfile
        fields = ['nick_name','gender','birthday','mobile','city','province']

class UserInfoFormdizhi(forms.ModelForm):
    '''以後的修改，不能修改省市信息'''
    class Meta:
        model = UserProfile
        fields = ['nick_name','gender','birthday','mobile']

#models.py  
province=models.CharField(max_length=200,verbose_name="省份")
city=models.CharField(max_length=200,verbose_name="市")

#views.py
from .forms import UserInfoForm,UserInfoFormdizhi
class UserinfoView(LoginRequiredMixin, View):
    """"
    用戶個人信息
    """
    def get(self, request):
        uid = request.user
        print(uid)
        return render(request, 'usercenter-info.html', {})

    def post(self, request):
        uid = request.user
        province=request.POST.get('province')
        city=request.POST.get('city')
        user_info_form = UserInfoForm(request.POST, instance=request.user)
        user_info_form1=UserInfoFormdizhi(request.POST, instance=request.user)
        if user_info_form.is_valid():
            user_info_form.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        else:
            if user_info_form1.is_valid():
                user_info_form1.save()
                return HttpResponse('{"status":"success"}', content_type='application/json')
            else:
                return HttpResponse(json.dumps(user_info_form.errors), content_type='application/json')