使用Ajax

  • 使用视图通过上下文向模板中传递数据，需要先加载完成模板的静态页面，再执行模型代码，生成最张的html，返回给浏览器，这个过程将页面与数据集成到了一起，扩展性差
  • 改进方案：通过ajax的方式获取数据，通过dom操作将数据呈现到界面上
  • 推荐使用框架的ajax相关方法，不要使用XMLHttpRequest对象，因为操作麻烦且不容易查错
  • jquery框架中提供了$.ajax、$.get、$.post方法，用于进行异步交互
  • 由于csrf的约束，推荐使用$.get
  • 示例：实现省市区的选择
  • 最终实现效果如图：

  • 引入js文件

    • js文件属于静态文

    修改settings.py关于静态文件的设置

    STATIC_URL = '/static/'
    
STATICFILES_DIRS = [
    
    os.path.join(BASE_DIR, 'static'),
    
]

    在models.py中定义模型

    class AreaInfo(models.Model):
    
    aid = models.IntegerField(primary_key=True)
    
    atitle = models.CharField(max_length=20)
    
    aPArea = models.ForeignKey('AreaInfo', null=True)

    生成迁移

    python manage.py makemigrations
    
python manage.py migrate

    通过workbench向表中填充示例数据

    • 参见“省市区.sql”
    • 注意将表的名称完成替换

    在views.py中编写视图

    • index用于展示页面
    • getArea1用于返回省级数据
    • getArea2用于根据省、市编号返回市、区信息，格式都为字典对象
    from django.shortcuts import render
    
from django.http import JsonResponse
    
from models import AreaInfo

def index(request):
    
    return render(request, 'ct1/index.html')

def getArea1(request):
    
    list = AreaInfo.objects.filter(aPArea__isnull=True)
    
    list2 = []
    
    for a in list:
    
        list2.append([a.aid, a.atitle])
    
    return JsonResponse({'data': list2})

def getArea2(request, pid):
    
    list = AreaInfo.objects.filter(aPArea_id=pid)
    
    list2 = []
    
    for a in list:
    
        list2.append({'id': a.aid, 'title': a.atitle})
    
    return JsonResponse({'data': list2})

    在urls.py中配置urlconf

    from django.conf.urls import url
    
from . import views

urlpatterns = [
    
    url(r'^$', views.index),
    
    url(r'^area1/$', views.getArea1),
    
    url(r'^([0-9]+)/$', views.getArea2),
    
]

    主urls.py中包含此应用的url

    from django.conf.urls import include, url
    
from django.contrib import admin

urlpatterns = [
    
    url(r'^', include('ct1.urls', namespace='ct1')),
    
    url(r'^admin/', include(admin.site.urls)),
    
]

    定义模板index.html

    • 修改settings.py的TEMPLATES项，设置DIRS值
    'DIRS': [os.path.join(BASE_DIR, 'templates')],
    • 定义模板文件：包含三个select标签，分别存放省市区的信息
    <!DOCTYPE html>
    
<html>
    
<head>
    
    <title>省市区列表</title>
    
</head>
    
<body>
    
<select id="pro">
    
    <option value="">请选择省</option>
    
</select>
    
<select id="city">
    
    <option value="">请选择市</option>
    
</select>
    
<select id="dis">
    
    <option value="">请选择区县</option>
    
</select>
    
</body>
    
</html>

    在模板中引入jquery文件

    <script type="text/javascript" src="static/ct1/js/jquery-1.12.4.min.js"></script>

    编写js代码

    • 绑定change事件
    • 发出异步请求
    • 使用dom添加元素
        <script type="text/javascript">
    
        $(function(){

            $.get('area1/',function(dic) {
    
                pro=$('#pro')
    
                $.each(dic.data,function(index,item){
    
                    pro.append('<option value='+item[0]+'>'+item[1]+'</option>');
    
                })
    
            });

            $('#pro').change(function(){
    
                $.post($(this).val()+'/',function(dic){
    
                    city=$('#city');
    
                    city.empty().append('<option value="">请选择市</option>');
    
                    $.each(dic.data,function(index,item){
    
                        city.append('<option value='+item.id+'>'+item.title+'</option>');
    
                    })
    
                });
    
            });

            $('#city').change(function(){
    
                $.post($(this).val()+'/',function(dic){
    
                    dis=$('#dis');
    
                    dis.empty().append('<option value="">请选择区县</option>');
    
                    $.each(dic.data,function(index,item){
    
                        dis.append('<option value='+item.id+'>'+item.title+'</option>');
    
                    })
    
                })
    
            });

        });
    
    </script>

django基础知识之Ajax:的更多相关文章

  1. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  2. day 72 Django基础七之Ajax

    Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...

  3. day 60 Django基础七之Ajax

      Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  5. Django基础五之Ajax

    Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...

  6. Django基础七之Ajax

    一 Ajax简介 1.简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  7. django 基础知识回顾

    内容回顾: 1. ajax参数 url: type: data: 1.value不能是字典 {k1:'v1',k2:[1,2,3,],k3; JSON.string} 2.$('').serilize ...

  8. 01 Django基础知识

    相关概念 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能 ...

  9. django基础知识

    一.django的安装 1. pip3 install django 2. 把安装路径加到环境变量里以便以后启动admin相关命令,在windows系统中---我的电脑---属性----高级系统设置- ...

随机推荐

  1. App.xaml介绍

    在App.xaml.cs中指定 public App () { InitializeComponent(); MainPage = new XamarinDemo.MainPage(); } 同时,这 ...

  2. 关于WPF后台触发键盘按键

    1.变向响应Tab按键 private void Grid_KeyUp(object sender, KeyEventArgs e)         {             UIElement e ...

  3. C#：foreach语句，yield语句

    原文:C#:foreach语句,yield语句 1. foreach语句 C#编译器会把foreach语句转换为IEnumerable接口的方法和属性. foreach (Person p in pe ...

  4. 安装 VirtualBox 出现回滚，无法安装及解决方法

    原文:安装 VirtualBox 出现回滚,无法安装及解决方法 缘由:打算安装 Vagrant,因此打算安装 VirtualBox. 现象:安装 VirtualBox,进度快到最后的时候,安装程序执行 ...

  5. PRML Chapter2

    参考文献:PRML2 参数方法和非参数方法 机器学习上的方法分为参数方法(根据先验知识假定模型服从某种分布,然后利用训练集估计出模型参数,也就弄清楚了整个模型,例如感知器)和非参数方法(基于记忆训练集 ...

  6. Qt 中C++ static_cast 和 reinterpret_cast的区别（static_cast是隐式类型转换，会有数据损失，reinterpret_cast是底层二进制转换，没有数据损失）

    1.C++中的static_cast执行非多态的转换,用于代替C中通常的转换操作.因此,被做为隐式类型转换使用.比如: int i; float f = 166.7f; i = static_cast ...

  7. XPath概述

    1.  XPath 具体示例可参考网址: http://www.zvon.org/xxl/XPathTutorial/General/examples.html 1.1 概述 * 现节点下所有元素 * ...

  8. New,Getmem,ReallocMem联系与区别（转）

    procedure New(var P: Pointer);  {为一个指针变量分配内存,会自动计算指针所指数据结构需要空的空间大小} procedure GetMem(var P: Pointer; ...

  9. HTML续

    HTML class属性 定义和用法 class 属性规定元素的类名(classname). class 属性大多数时候用于指向样式表中的类(class).不过,也可以利用它通过 JavaScript ...

  10. python网络编程——实现简单聊天

    通过socket建立简单的聊天工具 server.py import socket import threading import time s = socket.socket(socket.AF_I ...