Ajax常用方法与后端（Django）通信403的解决方案

日常前言

最近Ajax用的越来越多了，每次用的时候都总是要去慢慢的翻看零散记录的笔记，So，今天整理一份详细的笔记，相信对各位会有点用。

开始

1、$.ajax()

用于向服务器发送HTTP请求，通过不重新加载页面的方式，更新页面的数据。常用的请求方式有GET和POST两种，e.g:

$.ajax({
    url: '/messyAjax/',
    type: 'GET'，
    success: function (data) {
        console.log('服务器数据为：'+ data);
    }
});

2、 $.load()

load方法用于加载服务器数据，然后把数据返回到选择器选择到的div内。

常用于加载加载顶部导航栏、图片、音乐、用户个人信息等等。
若加载的是html文件，load()会自动去除html、body、script标签。
- 若加载的html文件需依赖js进行dom操作，则在load()函数里加入回调函数，使用$.getScript()函数进行加载

$('.g-topmodel').load('top_model.html',function(){
	console.log('导航栏dom加载完毕')
	$.getScript("topmodel.min.js");
});

3、如何正确的向后端（Django）发送ajax请求

为什么会出现403？

Django是Python中的一个后端框架，自身集成了许多web安全的模块，其中就包含csrf（跨站请求伪造），下面通过一张图简单了解一下。Django的防御机制呢，就是在所有含有post请求的页面全部设置一个实时刷新的csrf_token，当post请求发送时，验证这个值，若不符，返回403。

Ajax常用方法与后端（Django）通信403的解决方案

这时有人要问了，我在自己的网站下发送的Ajax请求，又不是跨站，他还要403吗？答案是肯定的，csrf_token的生成机制是，只要是一个请求，都会验证是否正确，Ajax发送的时候是空状态，没有任何信息，所有最后还是会返回403。
####怎么解决呢？
答案是：获取当前页的csrf_token的值

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
	$.ajax({
		url: '/messy_ajax/',
		type: 'POST',
		headers:{
			# 通过jq的cookie库拿到csrf_token加入在请求头中进行返回
			"X-CSRFToken":$.cookie('csrftoken')
		},
		data: {
			'Messy':'Messy',
		},
		success: function () {
			console.log('请求发送成功!')
		}
	});
</script>

其他解决方案？

暂时没有其他的方法，试过几种的其他方法都失败了，以下罗列失败的方法，直接跳过坑（注意是失败的方法，不要看错了）

在ajaxSetup里设置csrf data
$.ajaxSetup({data: {csrfmiddlewaretoken: '{{ csrf_token }}' }});
导入第三方编辑的csrf.js
获取html中的{% csrf_token %}的值导入data（都ajax，当然html中没有csrf_token了…）

本文作者: Messy
原文链接:https://www.messys.top/detail/36
版权声明: 本博客所有文章除特别声明外, 均采用 CC BY-NC-SA 4.0 许可协议. 转载请注明出处!

Ajax常用方法与后端（Django）通信403的解决方案

日常前言

开始

为什么会出现403？

其他解决方案？

相关推荐