Django 模板中使用 Ajax POST

简介: Django 模板中使用 Ajax POST

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文档的“跨站请求伪造保护”相关内容。

目录
相关文章
|
3月前
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
27 6
|
3月前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
27 4
|
3月前
|
Java C++ Python
django 模板 过滤器
django 模板 过滤器
|
3月前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
28 0
|
4月前
|
前端开发 JavaScript 数据库
python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
|
4月前
|
JSON 数据处理 API
Django后端架构开发:视图与模板的正确使用
Django后端架构开发:视图与模板的正确使用
38 1
|
4月前
|
前端开发 Python
Django模板
【8月更文挑战第19天】
32 3
|
4月前
|
自然语言处理 前端开发 数据处理
Django的模板系统
【8月更文挑战第13天】
31 2
|
4月前
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
136 0
|
4月前
|
前端开发 数据处理 开发者
解锁Django模板系统终极奥义!揭秘高效前端渲染秘籍,让你的网站秒变炫酷黑科技!
【8月更文挑战第31天】Django作为Python的高级Web框架,内置的模板系统支持动态HTML渲染。本文通过在线书店案例,详细介绍Django模板系统的设置与高效渲染技巧,包括创建模板文件、编写视图函数及URL配置。通过合理使用过滤器、深度查询和模板继承等技巧,提升前端渲染效率和安全性,优化Web应用开发流程。
27 0