Django 使用 ajax 和通過 csrf 認證的三種方式
ajax 特點
- 局部刷新
- 異步請求
Django 中 ajax 的寫法
ajax 是封裝在 jQuery 中的，要使用 ajax，首先要引入 jQuery。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>登錄頁面</h1>
{#<form action="" method="post">#}
{# {% csrf_token %}#}
{# 用戶名: <input type="text" name="username">#}
{# 密碼: <input type="text" name="password">#}
{# <input type="submit">#}
{#</form>#}
{% csrf_token %}
<hr>
用戶名: <input type="text" id="uname">
密碼: <input type="password" id="pwd">
<button id="sub">提交</button>
<span id="error" style="color:red;font-size: 12px;"></span>
</body>
<!-- jQuery中封裝了ajax -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
{#<script src="{% static 'js/xx.js' %}"></script>#}
<script>
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '{% url "login" %}', // 請求路徑
type: 'post', // 請求方法
// 請求數據,不需要攜帶數據的請求，不需要寫data參數
data: {'uname': uname, 'pwd': pwd, 'csrfmiddlewaretoken': csrf_token},
success: function (res) {
console.log('>>>>', res); // res參數拿到的是響應數據
if (res !== 'ok') {
$('#error').text('用戶名或者密碼有誤!')
}else {
location.href='/home/';
}
}
})
})
</script>
</html>
CSRF 簡介
CSRF（Cross-site request forgery），中文名稱：跨站請求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。攻擊者通過 HTTP 請求江數據傳送到服務器，從而盜取回話的 cookie。盜取回話 cookie 之后，攻擊者不僅可以獲取用戶的信息，還可以修改該 cookie 關聯的賬戶信息。
所以解決 CSRF 攻擊的最直接的辦法就是生成一個隨機的 csrftoken 值，保存在用戶的頁面上，每次請求都帶着這個值過來完成校驗。
ajax 通過 csrf_token 認證
方式 1 通過 input 標簽獲取
通過找到 csrf 邏輯經過模板渲染后生成的 input 標簽，獲取到 csrf token 的值。
hmtl 代碼
ajax 可以直接提交數據，所以不需要將 input 標簽包裹在 form 標簽之中。
{% csrf_token %}
用戶名: <input type="text" id="uname">
密碼: <input type="password" id="pwd">
<button id="sub">提交</button>
js 代碼
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
// 獲取到{% csrf_token %}這個模板渲染語法渲染之后的input標簽對應的值
var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '{% url "login" %}', // 127.0.0.1:8000/login/
type: 'post',
// 給post請求提交的數據中添加上csrf_token認證所需要的鍵值對
data: {'uname': uname, 'pwd': pwd, 'csrfmiddlewaretoken': csrf_token},
success:function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用戶名或者密碼有誤!')
}else {
location.href='/home/';
}
}
})
})
方式 2 模板渲染直接獲取
data 數據部分的 csrf_token 認證的鍵值對的值直接寫
{{ csrf_token }}
經過模板渲染之后，它直接就是那個 input 標簽的 value 值。
html 代碼
同樣，不需要將 input 標簽包裹在 form 標簽中。
用戶名: <input type="text" id="uname">
密碼: <input type="password" id="pwd">
<button id="sub">提交</button>
js 代碼
$('#sub').click(function () {
var uname = $('#uname').val();
var pwd = $('#pwd').val();
$.ajax({
url: '{% url "login" %}', // 127.0.0.1:8000/login/
type: 'post',
// 需要注意的是：經過模板渲染后的內容是不會帶引號的，需要我們手動給csrf_token加引號，表示這是一個字符串，否則將會按照變量來解析，從而出錯
data: {'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'},
success: function (res) {
console.log('>>>>',res);
if (res !== 'ok'){
$('#error').text('用戶名或者密碼有誤!')
}else {
location.href='/home/';
}
}
})
})
方式 3 通過 Cookie 獲取
jQuery 中沒有封裝操作 Cookie 的代碼，需要我們先引入。
<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'jquery.cookie.js' %}"></script>
<script>
$('#btn').click(function () {
var uname = $('[type="text"]').val();
var pwd = $('[type="password"]').val();
// var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '/login/',
type: 'post',
// data:{uname:uname,pwd:pwd,csrfmiddlewaretoken:csrf_token},
headers: {'X-CSRFToken': $.cookie('csrftoken')}, // 獲取cookie中的csrftoken，將其設置為ajax的請求頭
data: {uname: uname, pwd: pwd},
success: function (res) {
console.log(res);
}
})
})
</script>