Django中資料傳輸編碼格式、ajax傳送json資料、ajax傳送檔案、django序列化元件、ajax結合sweetalert做二次彈窗、批量增加資料
阿新 • • 發佈：2022-03-08
目錄
前後端傳輸資料的編碼格式(contentType)
提交post請求的兩種方式:
- form表單
- ajax請求
前後端傳輸資料的編碼格式
- urlencoded
- formdata(form表單裡的)
- jaon
研究form表單
預設的資料編碼格式是urlencoded
資料格式:username=jason&password=123
當提交方式改為enctype="multipart/form-data"後
總結
urlencoded編碼格式
django後端針對符合urlencoded編碼格式的資料會自動幫你解析封裝到request.POST中
eg: username=jason&password=123 >>> request.POST
formdata編碼格式
針對普通的鍵值對還是解析到request.POST中,而將檔案解析到request.FILES中
json
form表單不支援傳送json資料
研究ajax
預設的編碼格式是urlencoded
資料格式:username=jason&age=20
總結
django後端針對符合urlencoded編碼格式的資料都會自動幫你解析封裝到request.POST中
username=jason&age=20 >>> request.POST
ajax傳送json格式資料
注意事項
1.contentType引數指定成: application/json
2.資料必須是json資料，不是要用JSON.stringify轉成json格式
3.django後端要用request.body獲取並處理而不是用request.POST
4.reuqest.is_ajax()是判斷當前請求是否是ajax請求，返回布林值
前端ajax
<script>
$('#d1').click(function (){
$.ajax({
url:'', # 朝哪發資料
type:'post', # 指定請求方式
contentType:'application/json', # 指定編碼格式
data:JSON.stringify({'username': 'jason', 'pwd': 123}), # 序列化成json格式
success:function (args){
}
})
})
</script>
後端接收資料
if request.is_ajax():
if request.method == 'POST':
dic_json = request.body # body接收的資料是二進位制格式
dic = json.loads(dic_json) # json特點:自動解碼並且反序列化(可以減少一步操作)
print(dic)
ajax傳送檔案
條件： ajax傳送檔案需要藉助於js內建物件FormData
前端ajax
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p>file: <input type="file" id="d3"></p>
<button class="btn btn-primary" id="d4">點我</button>
<script>
$('#d4').on('click', function (){
// 1.需要先利用FormData內建物件
let formDataObj = new FormData()
// 2.新增普通鍵值對
formDataObj.append('username', $('#d1').val())
formDataObj.append('password', $('#d2').val())
// 3.新增檔案物件
formDataObj.append('myfile', $('#d3')[0].files[0])
// 4.將物件基於ajax傳送給後端
$.ajax({
url:'',
type:'post',
data:formDataObj, // 直接將物件放在data後面即可
// 5.ajax傳送檔案必須要指定兩個引數
contentType:false, // 告訴瀏覽器不要修改提交的資料格式
processData:false, // 告訴瀏覽器不要對提交的資料進行任何的更改
success:function (args){
}
})
})
</script>
後端接收檔案
def file(request):
if request.method == 'POST':
print(request.POST)
print(request.FILES)
file_obj = request.FILES.get('myfile')
print(file_obj.name)
return render(request, 'file.html')
django自帶的序列化元件
在前後分離的專案中，不能使用模板語法，只能用過json格式來實現資料的互動，一般資料的組成都是列表套字典
手動
def drf(request):
from django.http import JsonResponse
user_queryset_list = models.User.objects.all()
# 不用元件手動的新增字典
user_list = []
for user_obj in user_queryset_list:
temp = {
'pk': user_obj.pk,
'username': user_obj.username,
'age': user_obj.age,
'sex': user_obj.get_sex_display(),
}
user_list.append(temp)
return JsonResponse(user_list, safe=False, json_dumps_params={'ensure_ascii': False})
元件序列化
def drf(request):
from django.http import JsonResponse
from django.core import serializers
user_queryset_list = models.User.objects.all()
# 序列化
res = serializers.serialize('json', user_queryset_list) # 指定json格式 然後傳入資料
return JsonResponse(res, safe=False)
"""會自動幫你將資料變成json格式的字串 並且內部非常的全面"""
前後端分離的專案
作為後端開發的你只需要寫程式碼將資料處理好
能夠序列化返回給前端即可
再寫一個介面文件 告訴前端每個欄位代表的意思即可
寫介面就是利用序列化元件渲染資料然後寫一個介面文件 該交代交代一下就完事
ajax結合sweetalert做彈窗效果
前端
"""
自己要學會如何拷貝
學會基於別人的基礎之上做修改
研究各個引數表示的意思 然後找葫蘆畫瓢
"""
下面style是為了處理一些顯示BUG
<style>
div.sweetalert h2 {
padding-top: 10px;
}
</style>
<script>
$('.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:'/delete/user/' + 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");
}
});
})
</script>
後端
def delete(request):
user_list = models.User.objects.filter(is_delete=0)
if request.is_ajax():
if request.method == 'POST':
del_id = request.POST.get('id')
models.User.objects.filter(pk=del_id).update(is_delete=1)
back_dic = {'status': 200, 'msg': '刪除成功'}
return JsonResponse(back_dic)
return render(request, 'delete.html', locals())
這是顯示的BUG，按最上面的style改一下就好
最終版
總結
1.以後要獲取標籤內的屬性可以通過自定義的方式，不要侷限於標籤固有的屬性
用jqery物件.attr(屬性名) 就可以獲得到對應的屬性值
如果是獲取input框使用者輸入的資料 就用jqery物件.val()
2.還有一個設定點選事件的方法就是在標籤內部定義
eg: <button onclick="del(可以傳參)">刪除</button>
然後在<script> function del(引數){...} </script>
3.標籤的id是不可重複的,可以用拼接的方式使id不重複
eg: <a onclick="del({{ user_obj.id }})" id="btn_{{ user_obj.id }}">刪除</a>
獲取標籤物件可以用拼接來獲取
<script>
function del(id){
$('#btn_' + id ) // 這樣也是可以的 等價於 $('#btn_1') 、$('#btn_2')...
}
</script>
批量插入
格式: bulk_create
普通插入資料
def ab_pl(request):
先給Book插入一萬條資料
for i in range(10000):
models.Book.objects.create(title='第%s本書'%i)
# 再將所有的資料查詢並展示到前端頁面
book_queryset = models.Book.objects.all()
return render(request,'ab_pl.html',locals())
# 很慢 響應時間大概10s左右 還只是10000條資料
批量插入
批量插入
book_list = []
for i in range(100000):
book_obj = models.Book(title='第%s本書' % i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list) # 批量插入資料 使用列表套物件
return render(request,'ab_pl.html',locals())
# 用時3s 而且資料還是100000條