使用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. 【转载】FusionSphere架构详解

    FusionSphere底层使用Xen架构: 1.单台物理机上建立hypervisor系统. 2.将所有单个hypervisor系统整合起来管理使用. 安装CNA节点,所有的物理服务器都会先成为CNA ...

  2. 【msdn wpf forum翻译】TextBox中文本 中对齐 的方法

    原文:[msdn wpf forum翻译]TextBox中文本 中对齐 的方法 原文链接:http://social.msdn.microsoft.com/Forums/en-US/wpf/threa ...

  3. 数据绑定（九）Binding的数据校验

    原文:数据绑定(九)Binding的数据校验 Binding用ValidationRules属性来校验数据的有效性,ValidationRules属性类型是Collection<Validati ...

  4. wpf 高DPI开发

    https://blog.walterlv.com/post/windows-high-dpi-development.html https://blog.csdn.net/ZslLoveMiwa/a ...

  5. wpf.xaml.behavior

    Install-Package Microsoft.Xaml.Behaviors.Wpf Remove reference to “Microsoft.Expression.Interactions” ...

  6. 在Delphi中静态调用DLL

    在Delphi中静态调用DLL top 调用一个DLL比写一个DLL要容易一些.首先给大家介绍的是静态调用方法,稍后将介绍动态调用方法,并就两种方法做一个比较.同样的,我们先举一个静态调用的例子. u ...

  7. SQLSERVER使用密码加密备份文件以防止未经授权还原数据库

    原文:SQLSERVER使用密码加密备份文件以防止未经授权还原数据库 SQLSERVER使用密码加密备份文件以防止未经授权还原数据库 在备份数据库的时候,用户可以为媒体集.备份集或两者指定密码 在ba ...

  8. Mac App Store应用签名和pkg签名（必须签名后才能销售）

    App签名 只有用苹果颁发的证书签名的应用才能在App Store上进行销售,所以我们开发的应用必须打上签名. 签名有两种方式,一是使用Xcode,在配置里面设置签名,编译出来的app就有了签名:二是 ...

  9. 地球坐标-火星坐标-百度坐标及之间的转换算法 C#

    美国GPS使用的是WGS84的坐标系统,以经纬度的形式来表示地球平面上的某一个位置.但在我国,出于国家安全考虑,国内所有导航电子地图必须使 用国家测绘局制定的加密坐标系统,即将一个真实的经纬度坐标加密 ...

  10. 前端 JS 修炼（第一天）包装对象、作用域、创建对象

    1.js基本概念以及注意 直接量 :程序中直接使用的数据值.下面列出的都是直接量: 1 12 //数字 2 1.2 //小数 3 "hello world" //字符串文本 4 t ...