使用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. jquery获取选中的值和设置单选扭选中

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. WPF 绑定到集合

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  3. JNDI（Java Naming and Directory Interface）

    # 前言 内容基本拷贝,整理出来,方便以后回忆. # What The Java Naming and Directory Interface™ (JNDI) is an application pr ...

  4. Android项目实战（四十）：在线生成按钮Shape的网站

    原文:Android项目实战(四十):在线生成按钮Shape的网站 AndroidButton Make  右侧设置按钮的属性,可以即时看到效果,并即时生成对应的.xml 代码,非常高效(当然熟练的话 ...

  5. SQL Server 游标运用：查看一个数据库所有表大小信息（Sizes of All Tables in a Database）

    原文:SQL Server 游标运用:查看一个数据库所有表大小信息(Sizes of All Tables in a Database) 一.本文所涉及的内容(Contents) 本文所涉及的内容(C ...

  6. SQLServer 事务复制中使用脚本添加某个对象的发布

    原文:SQLServer 事务复制中使用脚本添加某个对象的发布 -- use [发布库] --添加表:创建项目并将其添加到发布中 exec sp_addarticle @publication = N ...

  7. Redis简介和安装

    Redis介绍 Redis是一种Key-Value存储系统(数据库),其提供了一组丰富的数据结构,如List,Sets,Hashes和Ordered Sets Redis安装 wget <Red ...

  8. C++开源库，欢迎补充

    C++在“商业应用”方面,曾经是天下第一的开发语言,但这一桂冠已经被java抢走多年.因为当今商业应用程序类型,已经从桌面应用迅速转移成Web应 用.当Java横行天下之后,MS又突然发力,搞出C#语 ...

  9. qt开发的小软件，可以递归转换文件编码（qt为了防止内存泄露所做的保护机制）

    应用场景 当你下载别人的源码的时候,而别人的源码跟你自己电脑里面的编码不一致的情况下将会出现乱码,但是如果要一个个转换编码的话那么那样所需要花的时间太多,所以就有必要写一个软件递归遍历项目下面所有的文 ...

  10. php生成html静态文件

    现在的动态网站存在很多性能上的弊端,seo优化会存在一定的瓶颈,现在将动态的网站代码转换为html静态文件,是浏览器通过html间接的读取动态网站源文件,这对其网站加载速度还是seo优化有着举足轻重的 ...