Django 使用ajax上傳文件
JSON
json指的是JavaScript對象表示法（JavaScript Object Notaion）
json是輕量級的文本數據交換格式
json獨立於語言
json具有自我描述性，更易理解
JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立於語言和平臺。
JSON 解析器和 JSON 庫支持許多不同的編程語言
stringify與parse方法
JavaScript中關於json對象和字符串轉換的兩種方法：
JSON.parse(): 用於將一個JSON字符串轉換成JavaScript對象
JSON.parse(‘{"name":"Q1mi"}‘);JSON.stringify(): 用於將JavaScript值轉換為json字符串
JSON.stringify({"name":"Qimi"})
AJAX簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的JavaScript和XML”。即使用JavaScript語言與服務器進行異步交互，傳輸的數據為XML
AJAX最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。
AJAX不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行
同步交互：客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求
異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求
AJAX常見應用場景
搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字
還有一個很重要的應用場景就是註冊時候的用戶名的查重
其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然後服務器會把查詢到的結果響應給瀏覽器，最後再把後端返回的結果展示出來
AJAX的優缺點
優點：
AJAX使用JavaScript技術向服務器發送異步請求；
AJAX請求無須屬性整個頁面
因為服務器響應內容不是整個頁面，性能高
jQuery實現的AJAX
最基本的jQuery發送AJAX請求實例：
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <button id="ajaxTest">AJAX 測試</button> <script> $("#ajaxTest").click(function () { $.ajax({ url: "/ajax_test/", type: "POST", data: {username: "Q1mi", password: 123456}, success: function (data) { alert(data) } }) }) </script>
AJAX請求如何設置csrf_token
方式一：
通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送
$.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "Q1mi", "password": 123456, "csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 }, success: function (data) { console.log(data); } })
AJAX上傳文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 上傳文件</title>
</head>
<body>
<h1>Ajax 上傳文件</h1>
{% csrf_token %}
<input type="file" name="avatar" id="i1">
<input type="submit" value="ajax上傳文件" id="b1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#b1").click(function () {
// 先生成一個FormData對象
// 將要提交的數據append到FormData對象中
var fd = new FormData();
fd.append("csrfmiddlewaretoken",$("[name=‘csrfmiddlewaretoken‘]").val());
fd.append("avatar",$("#i1")[0].files[0]);
$.ajax({
url: ‘/upload/‘,
type: ‘post‘,
data: fd,
contentType: false, // 不讓jQuery設置提交數據的類型
processData: false, //不讓jQuery去處理提交的數據
success:function (res) {
console.log(res)
}
})
});
</script>
</body>
</html>
ajax_upload.html
View Code
Django 使用ajax上傳文件