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請求，又不是跨站，他還要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 許可協議. 轉載請註明出處!