Ajax簡介
異步提交
局部刷新
局部刷新
朝發送請求的方式
1.瀏覽器地址欄直接輸入url回車 GET請求
2.a標簽href屬性 GET請求
3.form表單 GET請求/POST請求
4.ajax GET請求/POST請求
1.瀏覽器地址欄直接輸入url回車 GET請求
2.a標簽href屬性 GET請求
3.form表單 GET請求/POST請求
4.ajax GET請求/POST請求
AJAX 不是新的編程語言，而是一種使用現有標準的新方法(比較裝飾器)
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
小例子
頁面上有三個input框
在前兩個框中輸入數字 點擊按鈕 朝后端發送ajax請求
后端計算出結果 再返回給前端動態展示的到第三個input框中
(整個過程頁面不準有刷新,也不能在前端計算)
在前兩個框中輸入數字 點擊按鈕 朝后端發送ajax請求
后端計算出結果 再返回給前端動態展示的到第三個input框中
(整個過程頁面不準有刷新,也不能在前端計算)
js代碼
$('#btn').click(function () {
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url:'', // 不寫就是朝當前地址提交
// 2.請求方式
type:'post', // 不指定默認就是get 都是小寫
// 3.數據
{#data:{'username':'jason','password':123},#}
data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
// 4.回調函數:當后端給你返回結果的時候會自動觸發 args接受后端的返回結果
success:function (args) {
{#alert(args) // 通過DOM操作動態渲染到第三個input里面#}
{#$('#d3').val(args)#}
console.log(typeof args)
}
})
})
小結
當你在利用ajax進行前后端交互的時候
后端無論返回什么都只會被回調函數接受 而不再影響這個瀏覽器頁面了
后端無論返回什么都只會被回調函數接受 而不再影響這個瀏覽器頁面了
結論:寫ajax的時候 你可以直接將dataType參數加上 以防萬一 或者后端就用JsonResonse
前后端傳輸數據的編碼格式(contentType)
主要研究post請求數據的編碼格式
- get請求數據就是直接放在url后面的
- url?username=jason&password=123
可以朝后端發送post請求的方式
1.form表單
2.ajax請求
1.form表單
2.ajax請求
前后端傳輸數據的編碼格式
urlencoded
formdata
json
urlencoded
formdata
json
研究form表單
- 默認的數據編碼格式是urlencoded
- 數據格式:username=jason&password=123
- django后端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
- username=jason&password=123 >>> request.POST
- 如果你把編碼格式改成formdata，那么針對普通的鍵值對還是解析到request.POST中而將文件解析到request.FILES中
- form表單是沒有辦法發送json格式數據的
研究ajax
- 默認的編碼格式也是urlencoded
- 數據格式:username=jason&age=20
- django后端針對符合urlencoded編碼格式的數據都會自動幫你解析封裝到request.POST中
- username=jason&age=20 >>> request.POST
ajax發送json格式數據
- django針對json格式的數據 不會做任何的處理
- request對象方法補充
- request.is_ajax()
- 判斷當前請求是否是ajax請求 返回布爾值
js代碼
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'jason','age':25}),
contentType:'application/json', // 指定編碼格式
success:function () {
}
})
})
后端
第一種方式
json_bytes = request.body json_str = json_bytes.decode('utf-8') json_dict = json.loads(json_str) 第二種 # json.loads括號內如果傳入了一個二進制格式的數據那么內部自動解碼再反序列化 json_dict = json.loads(json_bytes)
ajax發送json格式數據需要注意點
-
1.contentType參數指定成:application/json
2.數據是真正的json格式數據
3.django后端不會幫你處理json格式數據需要你自己去request.body獲取并處理
ajax發送文件
ajax發送文件需要借助于js內置對象FormData
// 點擊按鈕朝后端發送普通鍵值對和文件數據
$('#d4').on('click',function () {
// 1 需要先利用FormData內置對象
let formDateObj = new FormData();
// 2 添加普通的鍵值對
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件對象
formDateObj.append('myfile',$('#d3')[0].files[0])
// 4 將對象基于ajax發送給后端
$.ajax({
url:'',
type:'post',
data:formDateObj, // 直接將對象放在data后面即可
// ajax發送文件必須要指定的兩個參數
contentType:false, // 不需使用任何編碼 django后端能夠自動識別formdata對象
processData:false, // 告訴你的瀏覽器不要對你的數據進行任何處理
success:function (args) {
}
})
})
后端接收
def ab_file(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request,'ab_file.html')
總結
1.需要利用內置對象FormData
// 2 添加普通的鍵值對
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件對象
formDateObj.append('myfile',$('#d3')[0].files[0])
2.需要指定兩個關鍵性的參數
contentType:false, // 不需使用任何編碼 django后端能夠自動識別formdata對象
processData:false, // 告訴你的瀏覽器不要對你的數據進行任何處理
3.django后端能夠直接識別到formdata對象并且能夠將內部的普通鍵值自動解析并封裝到request.POST中 文件數據自動解析并封裝到request.FILES中
django自帶的序列化組件(drf做鋪墊)
import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
user_queryset = models.User.objects.all()
# [{},{},{},{},{}]
user_list = []
for user_obj in user_queryset:
tmp = {
'pk':user_obj.pk,
'username':user_obj.username,
'age':user_obj.age,
'gender':user_obj.get_gender_display()
}
user_list.append(tmp)
方式1
return JsonResponse(user_list,safe=False)
方式2
return render(request,'ab_ser.html',locals())
方式3
# 序列化
res = serializers.serialize('json',user_queryset)
"""會自動幫你將數據變成json格式的字符串 并且內部非常的全面"""
return HttpResponse(res)
ajax結合sweetalert進行3二次確認
$('.del').on('click',function () {
// 先將當前標簽對象存儲起來
let currentBtn = $(this);
// 二次確認彈框
swal({
title: "你確定要刪嗎?",
text: "你可要考慮清除哦，可能需要拎包跑路哦!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "是的，老子就要刪!",
cancelButtonText: "算了,算了!",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true
},
function(isConfirm) {
if (isConfirm) {
// 朝后端發送ajax請求刪除數據之后 再彈下面的提示框
$.ajax({
{#url:'' + currentBtn.attr('delete_id'), // 1 傳遞主鍵值方式1#}
url:'/delete/user/', // 2 放在請求體里面
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
success:function (args) { // args = {'code':'','msg':''}
// 判斷響應狀態碼 然后做不同的處理
if(args.code === 1000){
swal("刪了!", args.msg, "success");
// 1.lowb版本 直接刷新當前頁面
{#window.location.reload()#}
// 2.利用DOM操作 動態刷新
currentBtn.parent().parent().remove()
}else{
swal('完了','出現了位置的錯誤','info')
}
}
})
} else {
swal("慫逼", "不要說我認識你", "error");
}
});
})
浙公網安備 33010602011771號