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. 【Java】-NO.16.EBook.4.Java.1.011-【疯狂Java讲义第3版 李刚】- AWT

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.011-[疯狂Java讲义第3版 李刚]-  AWT Style:EBook Series:Java ...

  2. 2019.03.24 Ajax

    也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包   可以去网上搜腾讯网静态资源库 然后引入包    Ajax还是异步处理  处理堵塞问题  import time 就可以了 ...

  3. 开启Laravel之旅的标准姿势

    1.github下载最新的laravel https://github.com/laravel/laravel 2.下载到本地,改名,composer install,安装项目的依赖包 compose ...

  4. HTTP请求响应报文 - 相关状态码 - GET_POST请求方法

    HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行 请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GET ...

  5. python的赋值，深拷贝和浅拷贝的区别

    原文地址https://www.cnblogs.com/xueli/p/4952063.html 赋值:a = [1,2,3,["a","b"]]  b=a,那 ...

  6. (已解决)Xcode 运行cocos2dx弹出内部错误对话框(Internal Error)

    cocos2dx未捕获的异常升高.选择“继续”继续运行在一个不一致的状态.选择“崩溃”停止应用和崩溃报告一个错误文件. 莫名其妙,代码没有报错,运行时却弹出(内部错误)对话框出来: 再看看崩溃的底层代 ...

  7. python爬虫-基础入门-爬取整个网站《2》

    python爬虫-基础入门-爬取整个网站<2> 描述: 开场白已在<python爬虫-基础入门-爬取整个网站<1>>中描述过了,这里不在描述,只附上 python3 ...

  8. css属性 background

    background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜 ...

  9. MongoDB Driver：使用正确的姿势连接复制集

    from:https://yq.aliyun.com/articles/8461?spm=5176.7937264.222114.10.s2oqcT   摘要: MongoDB复制集(Replica ...

  10. Java操作队列

    Java操作队列 常见的几种模式:   1 简单队列simple 模型:(p + 队列 + c) P:生产者producer,将消息发送到队列 红色:消息队列 C:消费者consumer,从队列消费消 ...