Django分离JS代码,处理AJax错误请求

在写Django时候,遇到个错误,这里进行下记录。

都知道Django或者Flask中通过下面这种方式

{%blockjs%}{%endblock%}

能够直接将js代码进行分离,使得单个的Template代码能够大大的减少,但是在某个模板中,如果需要大量的Ajax请求时,这里的block同样会变得很臃肿。

最近遇到的问题:

并且最近在进行Ajax的POST请求时候,遇到Illegal invocation这个错误。查了下,大概就是传递了个对象导致的,但是从自己代码上看,好像没有,因此找了下,发现在进行AJax提交时,默认会将数据转换成对象,并且会进行序列化处理,特别是在使用AJax进行文件上传时候。

Django中,开启CSRF的防护时,在进行POST提交时必须附带csrf_token,但是将JS分离后,独立的JS文件中是无法获取到

{{ csrf_token }}的,因此我只能采用传参的方式来解决。

使用block分离js后,还有很多相同功能的操作,导致代码功能极其难看,比如批量删除,因此对相同功能的代码进行了提取。

下面以复选框批量删除操作来说明上面的问题

多个复选框

复用代码,分离请求

分离JS代码,抽离功能

这里重点在Ajax请求时的两个参数:

processData: false,

contentType: false,

processData是让接收的数据别序列化,contentType主要是不处理Content-Type请求头。对于这里的Demo,两个参数都不能少。但是一般出现Illegal invocation错误时候,设置第一个即可解决。

https://zhidao.baidu.com/question/1926250710050869147.html

https://segmentfault.com/a/1190000007207128

本文来自企鹅号 - 安全小林哥媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何使用小程序导航

在日常开发小程序中,我们总不能吧所有数据都堆在首页。为此,需要一些二级三级页面。今天,我们来介绍介绍小程序比较重要的导航组件,使用导航组件,可以在小程序内外部进...

5465
来自专栏Web项目聚集地

什么是跨域?解决方案有哪些?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

2942
来自专栏CDA数据分析师

Excel简化办公系列之四 | 盘点Excel中那些少有人知道却实用的功能

本文为CDA作者青菜原创文章,转载请注明来源 编者按:CDA作者青菜将在近期发布「Excel简化办公」系列文章,本文是第四篇;更多精彩请持续关注~ 1.恢复未保...

21010
来自专栏IMWeb前端团队

RosinVSJSConsole

Rosin是一个Fiddler插件,协助开发者进行移动端页面开发调试。 特性 可配置的页面匹配规则 拦截console 日志内容的存储,展示,过滤 脚本运行错误...

2317
来自专栏散尽浮华

zabbix中配置当memory剩余不足20%时触发报警

在zabbix中默认当内存剩余量不足2G的时候触发报警,并没有使用百分比来触发如下: ? 现在需要配置:当memory剩余不足20%时触发报警,具体操作方法如下...

2726
来自专栏Puppeteer学习

一步一步学Vue(八)

1442
来自专栏Coding迪斯尼

java开发操作系统:不锁死控制台的加载用户进程

1262
来自专栏Jerry的SAP技术分享

webpack-dev-server启动后, localhost:8080返回index.html的原理

webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到...

1802
来自专栏追不上乌龟的兔子

使用MongoDB构建数据库集群

MongoDB是一个领先的非关系型数据库管理系统,也是NoSQL运动的重要成员。MongoDB不是使用关系数据库管理系统(RDBMS)的表和固定模式,而是在文档...

2043
来自专栏向前进

vue-cli脚手架npm相关文件解读(6)build.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

4148

扫码关注云+社区

领取腾讯云代金券