使用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. style文件的指定

    新建资源文件   写资源文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/prese ...

  2. [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口

    原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 周银辉 现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...

  3. wcf服务端代码方式及客户端代码方式

    ServiceHost  host;  // 全局 host = new ServiceHost(typeof(实现服务接口的类)); host.open(); 用代码配置端点的方法 host.add ...

  4. Win8Metro(C#)数字图像处理--2.5图像亮度调整

    原文:Win8Metro(C#)数字图像处理--2.5图像亮度调整  2.5图像亮度调整函数 [函数名称] 图像亮度调整函数BrightnessAdjustProcess(WriteableBit ...

  5. qt mingw64版本编译报错：incorrect register `%rax' used with `l' suffix（movl要改成mov）

    环境:WIN10 编译器:mingw64的g++.exe 我的目的是把程序编译成64bit版本的,所以一开始遇到该错误是丈二和尚摸不着头脑,google了一圈也没找到准确的答案.后来从某些回答中大概发 ...

  6. LINQ查询表达式---------from子句

    LINQ查询表达式---------from子句 LINQ的查询由3基本部分组成:获取数据源,创建查询,执行查询. //1.获取数据源 List<, , , , , }; //创建查询 var ...

  7. 无法解决 equal to 操作中 "SQL_Latin1_General_CP1_CI_AS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突。

    无法解决 equal to 操作中 "SQL_Latin1_General_CP1_CI_AS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突 ...

  8. Tensorflow初级篇

    第二章 Tensorflow主要依赖两个工具:Protocol Buffer和Bazel Protocol. Protocol Buffer是一个结构数据序列化的的工具,在Tensorflow中大部分 ...

  9. Qt编译和使用boost库（附QT5.51的Boost下载）good

    配置gcc可以在cmd中使用 添加MinGW到环境变量 安装过Qt的都已经默认安装过MinGw的环境了,只需要找到配置一下环境变量就行 我的在D:\Qt5.5.1\Tools\mingw492_32\ ...

  10. QTableWidget和 QTableView翻页效果（准确计算Scroll，然后使用setSliderPosition函数）

    以QTableView举例,QTableWidget使用相同   int CQTTableViewPageSwitch::pageCount(QTableView *p)//QTableView 总页 ...