Ajax (Asynchronous Javascript And XML )

特点:  异步  页面局部刷新  传递的数据量小

ajax 请求返回数据 重定向 location.href='/index/'

  1. 发请求的途径

    1. a标签 GET
    2. form表单 GET /POST
    3. 地址栏中输入地址回车 GET
  2. ajax

    1. 使用js的技术发请求的一个方式
    2. 特点: 异步 页面局部刷新 传输的数据量小
  3. 参数

    $.ajax({
    url: '/ajax_test/', // 请求的地址
    type: 'post', // 请求的方式
    data: { // 请求的数据
    name: 'alex',
    age: '73',
    hobby: JSON.stringify(['吃烧饼', '画大饼', '卖烧饼'])
    },
    success: function (res) { // 正常响应的回调函数
    $('[name="ii3"]').val(res)
    },
    error:function (res) { // 错误响应的回调函数
    console.log(res)
    }
    })
  4. 上传文件

    $('#b1').click(function () {
    var form_obj = new FormData();
    form_obj.append('f1',$('[name="f1"]')[0].files[0])
    $.ajax({
    url:'/upload/',
    type:'post',
    processData:false, // 不需要处理数据编码格式
    contentType:false, // 不需要处理请求头
    data:form_obj,
    success:function (res) {
    alert(res)
    }
    })
    })

    视图中

    def upload(request):
    if request.is_ajax():
    file_obj = request.FILES.get('f1')
    with open(file_obj.name, 'wb') as f:
    for chunk in file_obj.chunks(): # chunks() 以片段的形式获取 去每一个片段
    f.write(chunk)
    return HttpResponse('上传成功')
    return render(request, 'upload.html')

ajax可以提交POST请求的方式

  1. 页面中使用{% csrf_token %},给POST提交数据中添加csrfmiddlewaretoken的键值对

    data: {
    'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
    i1: $('[name="i1"]').val(),
    i2: $('[name="i2"]').val()
    },
  2. 添加X-csrftoken的请求头

    headers:{
    'X-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
    },
  3. 写文件 定义一个js 文件 ajax_setup.js

    从cookie中获取值,添加到请求头中。

    必须确保有csrftoken的cookie

    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
    var cookie = jQuery.trim(cookies[i]);
    // Does this cookie string begin with the name we want?
    if (cookie.substring(0, name.length + 1) === (name + '=')) {
    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    break;
    }
    }
    }
    return cookieValue;
    }

    var csrftoken = getCookie('csrftoken');
    
    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    } $.ajaxSetup({
    beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
    }
    });

django 中的 ajax的更多相关文章

  1. Django中的Ajax

    Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...

  2. django中的ajax组件

    目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...

  3. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  4. django中使用Ajax

    内容: 1.Ajax原理与基本使用 2.Ajax发送get请求 3.Ajax发送post请求 4.Ajax上传文件 5.Ajax设置csrf_token 6.django序列化 参考:https:// ...

  5. django中给ajax提交加上csrf

    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...

  6. django中的Ajax文件上传

    主要介绍两个 1.ajax文件上传 2.写路由器 3.创建对应的函数 4.file_put.html代码 <!DOCTYPE html> <html lang="en&qu ...

  7. django中使用AJAX时如何获取表单参数(按钮携带参数)

    前提是函数和相应的视图路由都已经配置好了,然后就是表单了: <form id="SmsForm" method="post" class="a& ...

  8. Django 中CSRF中间件 'django.middleware.csrf.CsrfViewMiddleware',

    1.Django中CSRF中间件的工作原理及form表单提交需要添加{% csrf_token %}防止出现403错误 CSRF # 表示django全局发送post请求均需要字符串验证功能:防止跨站 ...

  9. Django中关于“CSRF verification failed. Request aborted”的问题

    遇到该问题的情境 在Django中采用Ajax提交表单,涉及到跨域问题. 解决措施 在html页面中的表单内添加如下代码: {% csrf_token %} 在视图函数所在的py文件中添加如下代码: ...

随机推荐

  1. [译]ABP vNext微服务演示,项目状态和路线图

    译注: ABP的主要负责人hikalkan最近又发布了一篇博客, 说明了ABP vNext的微服务演示,项目状态和路线图.其中特意对ABP的中文社区进行了感谢! 本文翻译自该博客文章(https:// ...

  2. vue router history模式开发ngnix配置

    一.前沿 现在很多用vue-router开发页面的时候,都习惯使用hash路由莫模式,如:https://xxxx/#/index/share?code=dsfsd.这种模式在做pc端开发时候挺好用的 ...

  3. SpringBoot(4) SpringBoot热部署

    热部署,就是在应用正在运行的时候升级软件,却不需要重新启动应用. 使用springboot结合dev-tool工具,快速加载启动应用 官方地址:https://docs.spring.io/sprin ...

  4. U3D GameObject 解读

    GameObject本身没有功能,是Unity场景里所有组件的基类,但很多时候我们需要在脚本中操作GameObject.先讲一下GameObject类包含哪些内容,其中常用的用红色标出了 Variab ...

  5. 如何利用Maven Repository下载开源软件jar包

    1.打开Maven Repository 网站:https://mvnrepository.com/ 2.输入需要寻找的jar包名称,比如mybatis,点击search,一般第一个就是 3.点击选择 ...

  6. Socket 类

    构造函数       名称 说明 Socket(AddressFamily, SocketType, ProtocolType) 新实例初始化 Socket 类使用指定的地址族. 套接字类型和协议. ...

  7. 现如今的CDN网站加速技术,细说CDN

    CDN技术应用越来越广泛的被各大互联网公司所应用.已经成为了互联网企业离不开的一种网络运维方式.什么是CDN? CDN 利用全局负载均衡技术将用户的访问指向离用户最近的工作正常的流媒体服务器上,由流媒 ...

  8. JavaSE List集合

    我们掌握了Collection接口的使用后,再来看看Collection接口中的子接口和实现类,他们都具备那些特性呢? 接下来,我们一起学习Collection中的常用几个子接口: ​ java.ut ...

  9. 【CSS学习】--- 背景

    一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...

  10. demo:复制粘贴功能

    复制链接功能,也是为了方便用户一键"复制",粘贴链接和文本到指定位置,在此,接着上一篇"demo:生成专属二维码link "来记录一键"复制" ...