Django 模板中使用 Ajax POST

解决 Forbidden (CSRF token missing or incorrect.) 报错的解决方案

在以Django作为后端的项目开发中，前端的js按照往常使用阿贾克斯（ajax）-POST请时求往往会产生跨站请求伪造相关的报错。这里忽略该错误具体来龙去脉，仅通过以下代码示范如何让Dajngo后端成功接受到来自前端的POST请求信息。

这里需要用到一个js库，其官方github地址为
https://github.com/js-cookie/js-cookie/

// 引用js.cookie.min.js或将其代码完整添加到此
/*! js-cookie v3.0.0-rc.1 | MIT */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,r=e.Cookies=t();r.noConflict=function(){return e.Cookies=n,r}}())}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var t={read:function(e){return e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};return function n(r,o){function i(t,n,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape),n=r.write(n,t);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n+c}}return Object.create({set:i,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var n=document.cookie?document.cookie.split("; "):[],o={},i=0;i<n.length;i++){var c=n[i].split("="),u=c.slice(1).join("=");'"'===u[0]&&(u=u.slice(1,-1));try{var f=t.read(c[0]);if(o[f]=r.read(u,f),e===f)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){i(t,"",e({},n,{expires:-1}))},withAttributes:function(t){return n(this.converter,e({},this.attributes,t))},withConverter:function(t){return n(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(r)}})}(t,{path:"/"})});const csrftoken = Cookies.get('csrftoken');
/*再进行ajax POST请求*/
$.ajax({type:'POST',                         // 指定请求的方法data:youdata,                        // 请求提交的数据headers: {'X-CSRFToken': csrftoken}, // 很重要，设置请求头，提交Django时必须url: yoururl,                        // 你的请求提交url，必须dataType: JSON,                      // 数据格式可以为xml、json、script 或 html，默认自动判断。success:function(result){},          // 请求成功时的回调函数，完整格式为success(data, textStatus, jqXHR)error:function(XMLHttpRequest, textStatus, errorThrown){}                   // 请求失败时的回调函数
},

其中，也可以单独引用 js.cookie.min.js：

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

如需了解更多内容，推荐阅读Django文档的“跨站请求伪造保护”相关内容。

Django 模板中使用 Ajax POST相关推荐

Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
Django模板中如何将函数的变量作为字典key并获取对应的value
Django模板中如何将函数的变量作为字典key并获取对应的value 问题现有一字典 mydict = {'abc': 123} key = 'abc' 传入到模板后在模板html中你可能像下面 ...
[Django]网页中利用ajax实现批量导入数据功能
url.py代码: url(r'^workimport/$', 'keywork.views.import_keywork', name='import_keywork') view.py代码: fr ...
Django 模板中变量过滤器标签的使用方法
一.变量 1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量. 2.使用dot(.)能够访问变量的属性 3.当模板引擎碰到dot的时候,查 ...
Django 模板中变量、过滤器、标签的使用方法
2019独角兽企业重金招聘Python工程师标准>>> 一.变量 1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量. 2.使用dot( ...
python endif_在Django模板中的 if else endif
if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% endif %} 之间的任何内容 ...
django模板中引入CSS和JS
django中的模板功能非常强大,但是在django的模板中引入css和js要怎么处理呢,这个还是真的和普通的网页不太一样.因为在django中一般用来存放的模板的目录为template目录(注意:这 ...
django模板中for语句同时遍历两个列表
首先,如果在模板中直接遍历两个列表是会报错的,因为不支持. 那么,我们怎么解决? 有办法,在视图中先把两个列表用zip()函数打包即可,这样,就可以在模板中对两个列表同时for输出了视图: def ...
django模板中使用JQ代码实现瀑布流显示效果
settings中的配置不再详细说明一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...

Django 模板中使用 Ajax POST

Django 模板中使用 Ajax POST

解决 Forbidden (CSRF token missing or incorrect.) 报错的解决方案

Django 模板中使用 Ajax POST相关推荐

最新文章

热门文章