Django中使用Ajax
一、Ajax的應用:
- 異步提交：
同步異步：描述任務的提交方式
同步：提交任務之后，等待任務的返回結果，期間不干其他事
異步：提交任務之后，不等待返回結果，直接執行后面的步驟，任務的返回通過 回調機制
阻塞非阻塞：程序的運行狀態
程序運行的三狀態圖 - 局部刷新
一個頁面，不是整體刷新而是頁面的某個地方局部刷新
Ajax是一門js的技術，基於原生js開發。
Ajax最大的優點事在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。(這一特點給用戶的感受事在不知不覺中完成請求和響應過程)
示例：
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p><button id="b1">計算</button></p>
$('#b1').on('click', function(){
// 朝后端提交post數據
$.ajax({
// 1.到底朝后端哪個地址發數據
url:'', // 專門用來控制朝后端提交數據的地址
// 2.到底發送什么請求
type:'post', // 專門指定ajax發送的請求方式
// 3.發送的數據到底是什么
data:{'t1':$(#t1).val(), 't2':$('#t2').val()},
// 4.異步提交的任務需要通過回調函數來處理
success:function(data){ // data形參指代的就是異步提交的返回結果
// 通過DOM操作將內容 渲染到標簽內容上
$('#t3').val(data)
}
})
})
二、Ajax傳json格式數據
Django后端針對json格式的數據，不會自動解析，會原封不動的放到request.body中。
# views.py
def xxx(request):
...
json_bytes = request.body
json_str = json_bytes.decode()
json_dict = json.loads(json_str)
...
前端用ajax發送json'數據
$('#b1').on('click', function(){
$.ajax({
url:'',
type:'post',
// 1.指定contenttype參數
contentType:'application/json',
// 2.確保發送的數據是json格式的
data:JSON.stringify({'t1':$('#t1').val(), 't2':$('#t2').val()}),
success:function(data){
$('#t3').val(data)
}
})
})
三、Ajax發送文件
發送文件需要利用內置對象 Formdata
該對象既可以傳普通的鍵值 也可以傳文件
# 獲取input獲取用戶上傳文件的內容
// 1.先通過jquery查找到該標簽
// 2.將jquery對象轉換成原生的js對象
// 3.利用原生js對象的方法，直接獲取文件內容
$('#b1').click(function(){
// 1.先生成一個formdata對象
var myFormData = new FormData();
// 2.朝對象中添加普通的鍵值
myFormData.append('username', $('#t1').val());
myFormData.append('password', $('#t2').val()):
// 3.朝對象中添加文件數據
myFormData.append('myfile', $('#t3')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:myFormData, // 直接丟對象
// ajax傳文件，一定要指定兩個關鍵性的參數
contentType:false, // 不用任何編碼，因為formdata對象自帶編碼
processData:false, // 告訴瀏覽器不要處理該數據
success:function(data){
alert(data)
}
})
})
ajax傳文件需要注意的事項：
1.利用Formdata對象，能夠簡單的快速傳輸數據(普通鍵值 + 文件)
2.有幾個參數
- data:Formdata對象
- contentType:false
- processType:false
四、Ajax請求如何設置csrf_token
在Django中只要是POST請求，都必須要校驗csrf_token來防偽跨站請求。
方式一：
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Tonny",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
方式二：
在Django的靜態文件中新建一個js文件然后在使用Ajax頁面引入即可
js文件代碼如下：
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});