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>

  1.     //ajax在发送之前，做的header头
  2.     function csrfSafeMethod(method) {
  3.         // 匹配method的请求模式，js正则匹配用test
  4.         return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  5.     };
  6.  
  7.     // 为ajax请求做csrf_token
  8.     $.ajaxSetup({
  9.         beforeSend:function (xhr, settings) {
  10.             // 在请求头设置一次csrf_token,除了上面正则匹配到的不带csrf_token，其他的都要带
  11.             if(!csrfSafeMethod(settings.type)){
  12.                 xhr.setRequestHeader("x-CSRFToken", $.cookie("csrftoken"));
  13.             }
  14.         }
  15.     });

beforeSend

方式二：

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

  1. data:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(), "k1":v1, "k2":"v2",}  # 这个的话，还要在body里去找{% csrf_token %}
  2. data:{'user':user,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},    # 这个最方便，直接在这渲染了
  3. # for example：
  4. {% load staticfiles %}
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="x-ua-compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1">
  11.     <title>MyQuotion</title>
  12.     <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
  13.     <script src="{% static 'jquery-3.2.1.js' %}"></script>
  14.     <script src="{% static 'bootstrap.js' %}"></script>
  15. </head>
  16. <body>
  17. <div class="container">
  18.     <div class="row col-md-5 col-lg-offset-2">
  19.         {% csrf_token %}
  20.         <input type="text" class="form-control" id="user"/>
  21.         <input type="password" class="form-control" id="pwd"/>
  22.         <button class="btn btn-default" id="sure">确定</button>
  23.     </div>
  24. </div>
  25. </body>
  26. <script>
  27.     $('#sure').click(function () {
  28.         var user = $('#user').val();
  29.         var pwd = $('#pwd').val();
  30.         console.log(user,pwd);
  31.         $.ajax({
  32.             url:'http://127.0.0.1:8055/account/login/',
  33.             type: 'POST',
  34.             data:{'user':user,'pwd':pwd,"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(),},
  35.             // 这一种直接在这里渲染成了字符串，所以，最简单
  36.             <!--data:{'user':user,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},-->
  37.             success:function (data) {
  38.                 alert(data)
  39.             }
  40.         })
  41.     })
  42. </script>
  43. </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. Python Socket实现文件上传（TCP协议）

    在TCP协议下通过socket模块实现文件上传 #!/usr/bin/env python # -*- coding: utf-8 -*- # desc: tcp_server_file_upload ...

  2. [Java in NetBeans] Lesson 12. Arrays

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. Array: container that holds a fixed number of values of the sam ...

  3. MySQL数据类型--与MySQL零距离接触2-5字符型

    CHAR(5) : 存储abc时,由于长度不够,所以abc后面会补充2个空格,也就是abc CHAR 0-255字节 定长字符串 VARCHAR 0-65535 字节 变长字符串 ENUM('valu ...

  4. GoWeb-Gin 文件上载

    前些日子,我们Node.JS了一把. 如今,我们还是回到我们伟大的GO来吧 今天,带领大家继续Golang的啦,而且是个上传文件的例子 先给大家看结果 1. 如果是windows端,你需要安装post ...

  5. Bootstrap-媒体查询-屏幕大小

    .container{padding:0 15px; margin:0 auto;} .container:before{ content: ''; display: table;/*防止第一个子元素 ...

  6. asp.net webapi 404/或无效控制器/或无效请求 截取处理统一输出格式

    public static class PreRouteHandler     {         public static void HttpPreRoute(this HttpConfigura ...

  7. mybatis batchinsert

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...

  8. VS2010 发布网站时文件丢失解决办法

    网站项目中包含了一写rdlc的东西,发布网站选择仅限运行此应用程序所需文件,发布成功后发现这两个文件夹都没发布出来,找了下原因,解决办法是选择文件打开属性窗口找到生成操作,选项选择“内容”,重新发布, ...

  9. Vue系列之 => 使用钩子函数的第二个参数传参

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 即时通信系统中实现全局系统通知，并与Web后台集成【附C#开源即时通讯系统（支持广域网）——QQ高仿版IM最新源码】

    像QQ这样的即时通信软件,时不时就会从桌面的右下角弹出一个小窗口,或是显示一个广告.或是一个新闻.或是一个公告等.在这里,我们将其统称为“全局系统通知”.很多使用C#开源即时通讯系统——GGTalk的 ...