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

环境：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. tar 压缩解压命令详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  2. luarocks模块管理工具

    1.简介 该软件包可以安装和更新lua的第三方模块. 2.下载地址 请在 http://luarocks.org/releases/ 页面选择需要的软件包. wget http://luarocks. ...

  3. array2xml xml2array

    array2xml/**     *     * 将简单数组转化为简单的xml     * @param string $data  要进行转化的数组     * @param string $tag ...

  4. 001-mybatis框架

    架构分析: 1. 读SqlMapConfig.xml. 当调用与数据库有关的操作的时候,会读SqlMapConfig.xml文件中的信息,里面配置了Mybatis的运行环境信息,加载mapper.xm ...

  5. 2017-2018 ACM-ICPC East Central North America Regional Contest (ECNA 2017) Solution

    A:Abstract Art 题意:给出n个多边形,求n个多边形分别的面积和,以及面积并 思路:模板 #include <bits/stdc++.h> using namespace st ...

  6. 服务器负载、CPU性能判断

    说在前面: 在linux操作系统中,我们一般查看系统的cpu负载情况常用的命令可以是uptime,top,还有vmstat等这些个都是可以有的.每个工具所提供的信息各不相同, 我这里要讨论的仅说cpu ...

  7. python面向对象编程基础

    演示了 Python 类与对象的编程基础, 包括属性.方法.继承.组合.动态创建类. python 版本: 2.7.5 class SimpleClass(object): ''' a simple ...

  8. javascript数组总结

    数组是一个有序的集合,javascript数组中的元素的类型可以是任意的,同一个数组不同元素之间的类型也是可以不同的.数组也是对象,有个length属性,记录数组的长度. 创建数组有两种方法: 数组直 ...

  9. 将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

  10. [UI基础][实现]九宫格之应用程序管理

    [目标] 1.完成下图所示的View,View中的图片.文字数据从app.list文件读出. 2.思考代码哪里可以进行优化. [分析] 1.创建控件 整个View分12个部分,其中包含一个 UIIma ...