使用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. IOS开发之把 Array 和 Dictionaries 序列化成 JSON 对象

    1 前言通过 NSJSONSerialization 这个类的 dataWithJSONObject:options:error:方法来实现,Array 和 dictionary 序列化成 JSON ...

  2. java中==和equels的区别

    起初接触java的时候这个问题还是比较迷茫的,最近上班之余刷博客的时候看了一些大神写的文章,自己也来总结一下,直接贴代码: package string; public class demo1 { p ...

  3. 零元学Expression Blend 4 - Chapter 1 缘起

    原文:零元学Expression Blend 4 - Chapter 1 缘起 本来都使用Adobe相关工具从事设计工作的我,因缘际会下,接触到了Expression Blend 4,让我完全的对微软 ...

  4. 80%的岗位是没有太多能力上的要求的（少部分聪明的人开始觉醒，这部分一定是那些主动追求、主动学习的人；30岁现象能区分真正专业和不学无术的人）good

    不要沦陷程序员的30岁问题     热门> 就是学习能力和工作热情态度的问题. 我之前也跟作者一样思考过这个问题,答案是否定的. 在知识积累的行业,年纪越大,越吃香,比如金融,医学,IT.就怕3 ...

  5. Qt使用第三方库3rdparty

    简述 在 Qt 中经常会用到第三方库,例如:FFmpeg.OpenCV 等.第三方库的使用比较简单,只需要一些基本的配置就可以搞定,一起来看看吧! 简述 第三方库 源代码 库文件 目标目录 第三方库 ...

  6. Qt的模态对话框和非模态对话框 经常使用setAttribute (Qt::WA_DeleteOnClose)

    模态对话框就是指在子对话框弹出时,焦点被强行集中于该子对话框,子对话框不关闭,用户将无法操作其他的窗口.非模态相反,用户仍然可以操作其他的窗口,包括该子对话框的父对话框. 如果从线程角度来讲,模态对话 ...

  7. 使用 acl 编写 UDP 网络程序（UDP 重传及可靠性机制）

    在当今网络世界,虽然大部分网络应用都是基于 TCP 的,但有时 UDP 的网络通信也有用武之处.acl 的网络库中不仅提供了基于 TCP 的网络套接字流,同时也提供了 UDP 的网络库(目前 acl ...

  8. 利用批处理自动创建schtasks系统任务

    通过批处理自动创建schtasks系统任务,把下列代码保存成bat文件,放到要执行的文件的同级目录即可. @echo on set curpath=%cd%c:cd %systemroot%schta ...

  9. VC++的Unicode编程

    本文来自:http://tech.ddvip.com/2007-03/117395585321221.html 一.什么是Unicode 先从ASCII说起,ASCII是用来表示英文字符的一种编码规范 ...

  10. 界面美化．CStatic控件的美化（好多系列文章）

    http://www.cnblogs.com/20090802/archive/2010/09/17/1829283.html 静态控件也是比较常用的控件,在VS开发环境中用的应该挺频繁的吧. 其实m ...