Ajax相关 及 解决csrf_token

 

一、

　　AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。

　　即使用Javascript语言与服务器进行异步交互，传输数据。传输的数据不只是XML。

       特点优势：　

　　　　1. AJAX使用JavaScript技术向服务器发送异步请求

　　　　2. AJAX请求无须刷新整个页面，即可与服务器交换数据并更新部分网页内容

　　　　3. 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高 

　　　　　即（异步不等待）（局部刷新）（高性能）

　　ajax 的使用：

　　　　$.ajax( {  } )   参数如下

　　　　　　$.ajax({

　　　　　　　　url: "/calc/", 　　　　　　 　　 　　　 // 给谁发请求

　　　　　　　　type: "post", 　　　　　 　　　　　// 请求的方法

　　　　　　　　data: {"name": "Alex", "age": 35},   // 数据

　　　　　　　　success:function(res){ 　　　　 // 请求被成功响应之后会做的事儿

　　　　　　　　　　console.log(res)

　　　　　　　　},

　　　　　　　　error:function(err){

　　　　　　　　　　console.log(err) 　　 // 请求发生错误时会做的事儿

　　　　　　　　}
　　　　　　})

　　data中的对象不能发生嵌套，要做处理

　　　　data: {

　　　　　　"name": "alex",
　　　　　　"hobby": JSON.stringify(["抽烟", "喝酒", "吹牛逼"]),
　　　　},

　　

 　　原生JS 发 ajax：

 1 var b2 = document.getElementById("b2");
 2   b2.onclick = function () {
 3     // 原生JS
 4     var xmlHttp = new XMLHttpRequest();
 5     xmlHttp.open("POST", "/ajax_test/", true);
 6     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 7     xmlHttp.send("username=q1mi&password=123456");
 8     xmlHttp.onreadystatechange = function () {
 9       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
10         alert(xmlHttp.responseText);
11       }
12     };
13   };

View Code

 二、解决csrf_token方法

　　关键点是request请求中，必须要有 token随机字符串

　　方法1： 在ajax请求的传送数据（data）中设置 csrfmiddlewaretoken 值。

　　方法2： 在ajax请求头（headers）中设置 X-CSRFToken 值。

　　　　　　注意：可以使用 $.ajaxSetup( ) 方法为ajax请求统一设置。

　　

　　关于获取token随机字符串的方法：

　　　　方法1：渲染页面中加 {% csrf_token %} ，通过属性选择器$("[name='csrfmiddlewaretoken']").val()取值。

　　　　　　　　在前段渲染出一个隐藏的input标签，有属性name="csrfmiddlewaretoken",值就是token随机字符串
　　　　　　　（所以表单中加{%csrf_token%}，提交数据时，会将token随机字符串以键值对的形式一并提交）　　

　　　　　　　　

　　

　　　　方法2： 通过获取页面渲染时返回的cookie中的csrftoken的value值，就是所需token随机字符串。

　　　　　　　　形式1：

　　　　　　　　　　注意：需要引入一个jquery.cookie.js插件。

　　　　　　　　　　$.ajax({
　　　　　　　　　　　　　url: "/cookie_ajax/",
　　　　　　　　　　　　　type: "POST",

　　　　　　　　　　　　　// 从Cookie取csrftoken，并设置到请求头中
　　　　　　　　　　　　　headers: {"X-CSRFToken": $.cookie('csrftoken')}, 
　　　　　　　　　　　　　data: {"username": "Q1mi", "password": 123456},
　　　　　　　　　　　　　success: function (data) {
　　　　　　　　　　　　　　　console.log(data);
　　　　　　　　　　　　　}
　　　　　　　　　　})

　　　　　　　　形式2：

　　　　　　　　　　不引插件，自己写一个getCookie 方法，从Cookie中取csrftoken值

　　　　　　　　　　js静态文件中：

　　　　　　　　　　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');

　　　　　　　　　   JS中：

　　　　　　　　　　　　headers: {"X-CSRFToken": csrftoken},  // 从Cookie取csrftoken，并设置到请求头中

　　最终，解决csrf_token问题

　　官方推荐方法（插件版）：

　　　　　　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", $.cookie('csrftoken'));

        　　　　　　　 }

     　　　　　　 }

　　　　　　});

 

　　

 

ok

转载于:https://www.cnblogs.com/kingon/p/9442741.html