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

环境：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. Openstack（二）基本环境准备--网络、时间、yum源等

    2.1服务器版本安装 2.1.1服务器使用:centos7.4 + vm12 2.1.2重命名网卡: 传递内核参数 net.ifnames=0 biosdevname=0,以更改网卡名称为eth0,e ...

  2. Spark checkpoint机制简述

    本文主要简述spark checkpoint机制,快速把握checkpoint机制的来龙去脉,至于源码可以参考我的下一篇文章. 1.Spark core的checkpoint 1)为什么checkpo ...

  3. JDBC连接数据库（二）

    原文地址https://blog.csdn.net/jq_ak47/article/details/55049639 Mysql for java 的JDBC 驱动库安装 1.将下载下来的5.1.40 ...

  4. PHP实现返回JSON和XML的类分享

    PHP实现返回JSON和XML的类分享 <?php     class Reponse{         //private $result = array('code'=null,'messa ...

  5. pyqt简单介绍和使用

    QML和PyQT5联合编程 安装pyqt pip3 install PyQT5 main.QML import QtQuick 2.2 import QtQuick.Controls 1.1 impo ...

  6. 爬取乌云上所有人民币和乌云符号的漏洞（python脚本）

    import httplib from HTMLParser import HTMLParser import urlparse import urllib from bs4 import Beaut ...

  7. 梅尔频率倒谱系数（MFCC） 学习笔记

    最近学习音乐自动标注的过程中,看到了有关使用MFCC提取音频特征的内容,特地在网上找到资料,学习了一下相关内容.此笔记大部分内容摘自博文 http://blog.csdn.net/zouxy09/ar ...

  8. Web前端学习笔记之前端跨域知识总结

    0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的.但跨域方法的多种多样实在让人目不暇接.老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录. 0x01 什 ...

  9. Thinkphp在Lnmp环境下部署项目先后报错问题解决:_STORAGE_WRITE_ERROR_:./Application/Runtime/Cache/Home/...Access denied.

    首先报错:_STORAGE_WRITE_ERROR_:./Application/Runtime/Cache/Home/769e70f2e46f34ceb60619bbda5e4691.php 解决此 ...

  10. 【eclipse】查看jar乱码问题解决