此次主要是做省市区的三级联动。

环境：django 1.10

1. urls.py

 # coding:utf-8

 from django.conf.urls import url

 import views

 urlpatterns = [

     # ajax练习

     url(r'^area/$', views.areaindex, name='area'),

     url(r'^province/(?P<id>\d+)$', views.province, name='province'),

     ]

2. models.py

 # coding:utf-8

 from django.db import models

 class AreaInfo(models.Model):

     title = models.CharField(max_length=20)

     parent = models.ForeignKey('self', null=True, blank=True) # 省的parent为空，存储为NULL

     # 访问上级对象：area.parent

     # 访问下级对象：area.areainfo_set.all()

这里一定要注意第6行，自连接，parent 存的是父级的 id。

这里改完 models.py 后要记得迁移

liuqian@ubuntu:~$ python manage.py makemigration

liuqian@ubuntu:~$ python manage.py migrate

迁移完后录入数据。数据库字段如下：

3. views.py

 # coding:utf-8

 from django.shortcuts import render

 from django.http import JsonResponse

 from models import AreaInfo

 def areaindex(request):

     '''ajax练习'''

     return render(request, 'area.html')

 def province(request, id):

     id = int(id)

     if id == 0:

         # 查询省份

         provinces = AreaInfo.objects.filter(parent__isnull=True).values('id', 'title')

     else:

         # 查询区

         provinces = AreaInfo.objects.filter(parent=id).values('id', 'title')

     return JsonResponse({'data': list(provinces)})

注意：第15行和第18行的 values('id', 'title') 。因为 parent 字段是自连接字段，所以如果 values() 不带参数，可能会导错误（根据dajngo版本来决定）。

4. area.html

 {% load static from staticfiles %}

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

     <head>

         <title>ajax练习</title>

         <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>

         <!-- <script src="/static/book/js/jquery-1.10.2.min.js"></script> -->

         <script>

         $(function(){

             // 显示省

             $.get("{% url 'province' 0 %}", function(dic){ // {data:{id:..., title:...},{}}

                 pro = $('#pro');

                 $.each(dic.data, function(index, item) { // item ---> {id:..., title:...}

                     pro.append('<option value="' + item.id + '">' + item.title + '</option>')

                 })

             })

             // 根据省显示市

             $('#pro').change(function(){

                 $.get("/province/" + $(this).val(), function(city_data){

                     city = $('#city');

                     city.empty().append('<option value="0">请选择市</option>');

                     $('#dis').empty().append('<option value="0">请选择区</option>');

                     $.each(city_data.data, function(index, item){

                         city.append('<option value="' + item.id + '">' + item.title + '</option>')

                     });

                 });

             });

             // 根据市选择区

             $('#city').change(function(){

                 $.get("/province/" + $(this).val(), function(dis_data){

                     dis = $('#dis');

                     dis.empty().append('<option value="0">请选择区</option>');

                     $.each(dis_data.data, function(index, item){

                         dis.append('<option value="' + item.id + '">' + item.title + '</option>')

                     });

                 });

             });

         });

         </script>

     </head>

     <body>

             <select id="pro" name="pro">

                 <option value="0">请选择省</option>

             </select>

             <select id="city" name="city">

                 <option value="0">请选择市</option>

             </select>

             <select id="dis" name="dis">

                 <option value="0">请选择区</option>

             </select>

     </body>

 </html>

area.html 存放的位置根据 settings.py 中 TEMPLATES 的 DIRS 值来定。

jquery-1.10.2.min.js 存放的位置根据 settings.py 中 STATICFILES_DIRS 的值来定。

5. 访问

启动服务后，访问 http://127.0.0.1:8000/area/ ，即可看到下面的界面：

Django 之 Ajax的更多相关文章

  1. python Django之Ajax

    python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...

  2. django 接受 ajax 传来的数组对象

    django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...

  3. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  4. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  5. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  6. Django之Ajax提交

    Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...

  7. Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数

    Django和Ajax 一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语 ...

  8. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  9. Django之ajax(jquery)封装（包含 将 csrftoken 写入请求头方法）

    由于支持问题,未使用 es6 语法 _ajax.js /** * 发起请求 * @param url 请求地址 * @param data 请求数据 { } json格式 * @param type ...

  10. Django学习——图书管理系统图书修改、orm常用和非常用字段（了解）、 orm字段参数（了解）、字段关系（了解）、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)

    1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...

随机推荐

  1. tcp/udp/socket 端口映射，转发小工具

    1) 利用 Python 的 Socket 端口转发,用于远程维护 https://github.com/knownsec/rtcp 2) 反向端口转发工具 Reverse TCP Port to U ...

  2. mac3.0环境搭建

    export ANDROID_SDK_ROOT=/Users/sjxxpc/Documents/ADT/sdk export ANDROID_NDK_ROOT=/Users/sjxxpc/Docume ...

  3. 分页组件vue和jsp版本

    vue版本 <template> <div class="com-vscroll"> <slot name="mcontent"& ...

  4. Python笔记 #13# Pandas: Viewing Data

    感觉很详细:数据分析:pandas 基础 import pandas as pd import numpy as np import matplotlib.pyplot as plt dates = ...

  5. bzoj2721 / P1445 [Violet]樱花

    P1445 [Violet]樱花 显然$x,y>n$ 那么我们可以设$a=n!,y=a+t(t>0)$ 再对原式通分一下$a(a+t)+ax=x(a+t)$ $a^{2}+at+ax=ax ...

  6. 2018-2019-1 20189218《Linux内核原理与分析》第三周作业

    mykernel 实验 实验楼里按步骤运行一切顺利,make等待的时间特别久: 但是,启动mykernel后,实验楼的界面就不响应了,所以还是在自己虚拟机上做这个实验. 虚拟机搭建 mykernel ...

  7. [微信开发] - weixin4j关键类解析

    TokenUtil : get()获取我方自定义的token(从配置文件或数据库) checkSignature(Str..... (服务器配置连接验证有效性) /* * 微信公众平台(JAVA) S ...

  8. CSU 1968 Permutation Descent Counts

    http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1968 题意:对于任一种N的排列A,定义它的E值为序列中满足A[i]>A[i+1]的数的个 ...

  9. POJ 1637 Sightseeing tour（混合图欧拉回路+最大流）

    http://poj.org/problem?id=1637 题意:给出n个点和m条边,这些边有些是单向边,有些是双向边,判断是否能构成欧拉回路. 思路: 构成有向图欧拉回路的要求是入度=出度,无向图 ...

  10. Shell脚本之无限循环的两种方法

    for #!/bin/bash ;i<;)) do let "j=j+1" echo "-------------j is $j ----------------- ...