ajax发送csrf_token的不同方式：

方式一：

在ajax发送之前，做好处理，用到了beforeSend方法，把csrf_token写入到Header头内，csrf_token去jquery.cookie内取，但是，想要去cookie内取，首先要引用jquery.cookie.js文件；

jquery.cookie.js官网：http://plugins.jquery.com/cookie/

jquery-cookie官网：http://www.bootcdn.cn/jquery-cookie/

jquery-cookie的cdn：

　　https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js

　　<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    //ajax在发送之前，做的header头
    function csrfSafeMethod(method) {
        // 匹配method的请求模式，js正则匹配用test
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    };

    // 为ajax请求做csrf_token
    $.ajaxSetup({
        beforeSend:function (xhr, settings) {
            // 在请求头设置一次csrf_token,除了上面正则匹配到的不带csrf_token，其他的都要带
            if(!csrfSafeMethod(settings.type)){
                xhr.setRequestHeader("x-CSRFToken", $.cookie("csrftoken"));
            }
        }
    });

beforeSend

方式二：

在ajax发送的时候加在data里：

data:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(), "k1":v1, "k2":"v2",}  # 这个的话，还要在body里去找{% csrf_token %}
data:{'user':user,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},    # 这个最方便，直接在这渲染了
# for example：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyQuotion</title>
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
    <script src="{% static 'jquery-3.2.1.js' %}"></script>
    <script src="{% static 'bootstrap.js' %}"></script>
</head>
<body>
<div class="container">
    <div class="row col-md-5 col-lg-offset-2">
        {% csrf_token %}
        <input type="text" class="form-control" id="user"/>
        <input type="password" class="form-control" id="pwd"/>
        <button class="btn btn-default" id="sure">确定</button>
    </div>
</div>
</body>
<script>
    $('#sure').click(function () {
        var user = $('#user').val();
        var pwd = $('#pwd').val();
        console.log(user,pwd);
        $.ajax({
            url:'http://127.0.0.1:8055/account/login/',
            type: 'POST',
            data:{'user':user,'pwd':pwd,"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),},
            // 这一种直接在这里渲染成了字符串，所以，最简单
            <!--data:{'user':user,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},-->
            success:function (data) {
                alert(data)
            }
        })
    })
</script>
</html>

for example

Ajax解决csrf_token的不同方式的更多相关文章

  1. AJAX 解决什么问题？如何使用AJAX？AJAX 有什么问题需要注意？项目中哪里用到了AJAX？

    ajax 解决的问题就是“无刷新更新页面”,用传统的HTML 表单方式进行页面的更新时,每次都要将请求提交到服务器,服务器返回后再重绘界面,这样界面就会经历:提交→变白→重新显示这样一个过程,用户体验 ...

  2. 【转载】win10解决设置默认打开方式不生效问题（双击每次都要选择默认打开程序）

    win10解决设置默认打开方式不生效问题(双击每次都要选择默认打开程序) 以下文章 部分选自 https://blog.csdn.net/shan165310175/article/details/8 ...

  3. ajax之Content-Type决定form-data方式提交还是request-payloud等

    1.post请求的Content-Type为application/x-www-form-urlencoded,参数是在请求体中,即上面请求中的Form Data. 在servlet中,可以通过req ...

  4. Extjs6设置Store、Ajax、form的请求方式（GET、POST）

    Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...

  5. Java之解决线程安全问题的方式三：Lock锁

    import java.util.concurrent.locks.ReentrantLock; /** * 解决线程安全问题的方式三:Lock锁 --- JDK5.0新增 * * 1. 面试题:sy ...

  6. 8、struct2解决中文乱码的方式

    首先建立一个jsp页面 列如 页面编码统一问题,这个最容易解决. <%@ page language="java" import="java.util.*" ...

  7. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  8. 《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式

    一.AJAX概述 AJAX是Asynchronous JavaScript and XML的缩写.中文译作异步JavaScript和XML.AJAX 不是新的编程语言,而是一种使用现有标准的新方法.在 ...

  9. 解决ajax跨域几种方式

    发生跨域问题的原因: 浏览器的限制,出于安全考虑.前台可以正常访问后台,浏览器多管闲事报跨域问题,但其实前台已经访问到后台了. 跨域,协议.域名.端口任何一个不一样浏览器就认为是跨域. XHR(XML ...

随机推荐

  1. Ext.create细节分析

    var win1 = Ext.create('Ext.window.Window', { //实例化方法四 : 使用 完整的 Extjs 类名 width: 800, title: 'define t ...

  2. vim自动格式化

    ,gg 跳转到第一行 ,shift+v 转到可视模式 ,shift+g 全选 ,按下神奇的 = 你会惊奇的发现代码自动缩进了,呵呵,当然也可能是悲剧了.

  3. es6函数的扩展

    扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 扩展运算符的应用 (1)合并数组 // ES5 [1, 2].co ...

  4. Beta冲刺阶段5.0

    1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 首页活动详情界面的美化 实现首页 ...

  5. maven 知识

    1. maven 环境配置 Maven 3.3 要求 JDK 1.7 或以上   Maven 3.2 要求 JDK 1.6 或以上   Maven 3.0/3.1 要求 JDK 1.5 或以上 2. ...

  6. jQuery工具--$.each()和$.merge()

       jQuery.each(object, [callback])或者jQuery(object).each([callback]) 概述 通用遍历方法,可用于遍历对象和数组. 不同于遍历 jQue ...

  7. 解释器模式 Interpreter

    代码例子 参考 1.解释器模式定义 给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 说明:解释器模式设计到文法规则和抽象语法树. 2.解释器模式的结构 ...

  8. Spark学习之路 （十一）SparkCore的调优之Spark内存模型

    摘抄自:https://www.ibm.com/developerworks/cn/analytics/library/ba-cn-apache-spark-memory-management/ind ...

  9. 【Hadoop学习之十二】MapReduce案例分析四-TF-IDF

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 概念TF-IDF(term fre ...

  10. FileInputStream FileOutputStream

    FileInputStream is a stream to grab the information from files.Combined with FileOutputStream, we ca ...