Django 使用ajax上傳檔案
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