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

环境：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. Django REST framework 之 API认证

    RESTful API 认证 和 Web 应用不同,RESTful APIs 通常是无状态的, 也就意味着不应使用 sessions 或 cookies, 因此每个请求应附带某种授权凭证,因为用户授权 ...

  2. vue项目多页配置

    文件目录 ├─build ├─config ├─dist │ └─static │ ├─css │ ├─img │ └─js ├─src │ ├─assets │ │ ├─img │ │ ├─js │ ...

  3. 4.1 Routing -- Introduction

    一.Routing 1. 当用户与应用程序交互时,它会经过很多状态.Ember.js为你提供了有用的工具去管理它的状态和扩展你的app. 2. 要理解为什么这是重要的,假设我们正在编写一个Web应用程 ...

  4. c/c++值传递和引用传递

    今天看数据结构的时候,因为是c语言版的,刚开始学的时候就对指针搞的焦头烂额,今天,发现参数传递的时候,&符号也莫名其妙,搜了一篇好文,转载下来. 一. 函数参数传递机制的基本理论 函数参数传递 ...

  5. 1 - bootstrap基本模板

    bootstrap 3.x 下载地址:http://v3.bootcss.com/ 基本模板如下: <!DOCTYPE html> <html lang="zh-cn&qu ...

  6. SimpleDateFormat实现String与Date之间的转换

    基本用法: java.text.SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd"); java.util.Date ...

  7. vim多行注释和取消注释 Ubuntu

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按d 是选择到最后一行,也可以直接光标上下左右,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例 ...

  8. 微信小程序：本地资源图片无法通过 WXSS 获取，可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  9. 20145319 《网络渗透》Adobe阅读器渗透攻击

    20145319 <网络渗透>Adobe阅读器渗透攻击 一 实验内容 初步掌握平台matesploit的使用 有了初步完成渗透操作的思路 本次攻击对象:windows xp sp3  Ad ...

  10. ExtJS错误解决 Cannot read property 'on' of undefined

    背景 用ExtJS新写了一个功能,运行时控制台打印错误Cannot read property 'on' of undefined,出错代码位置是Ext.define.bindStoreListene ...