ajax結合sweetalert實現二次確認
二次確認效果: http://lipis.github.io/bootstrap-sweetalert/
<body>
<div class="container-fluid">
<h1 class="text-center">資料展示</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table-striped table table-hover">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年紀</th>
<th>性別</th>
<th>描述</th>
</tr>
</thead>
<tbody>
{% for user_obj in user_request %}
<tr>
<td>{{ user_obj.pk }}</td>
<td>{{ user_obj.username }}</td>
<td>{{ user_obj.age }}</td>
<td>{{ user_obj.get_gender_display }}</td>
<td>{{ user_obj.gender }}</td>
<td>
<button class="btn btn-toolbar btn-xs">編輯</button>
<!--注意，繫結ajax事件在for迴圈中不能加id，每for迴圈一次出現一個按鈕，
如果繫結id就意味著for迴圈後出現的按鈕id值一致，使用class=del
我們需要實現使用者點選刪除按鈕，後端能夠知道使用者到底要刪那條資料，
後端怎麼知道？主鍵。
自定義屬性
-->
<button class="btn btn-danger btn-xs del" delete_id="{{ user_obj.pk }}">刪除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$('.del').on('click',function (){
alert(123)
})
</script>
好了，使我們需要取引入第三方模組，二次確認。
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
其中有些資訊可以修改。
<script>
$('.del').on('click',function (){
//attr 獲取標籤中屬性所對應的值
{#alert($(this).attr('delete_id'))#}
//二次確認彈框
swal({
title: "確定刪除？?",
text: "你他孃的再想想！！!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "我就要刪!",
cancelButtonText: "不，我不想刪!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
swal("已刪除!", "你個吊毛", "success");
} else {
swal("慫逼", "在這裝JB毛", "error");
}
});
})
</script>
在確認刪除會發現第三方模組的匯入可能不相容，可手動修改。
<style>
div.sweet-alert h2 {
padding-top: 15px;
}
</style>
前端該有的都有了，現在開始操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'dist/sweetalert.js' %}"></script>
<style>
div.sweet-alert h2 {
padding-top: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="text-center">資料展示</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table-striped table table-hover">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年紀</th>
<th>性別</th>
<th>描述</th>
</tr>
</thead>
<tbody>
{% for user_obj in user_request %}
<tr>
<td>{{ user_obj.pk }}</td>
<td>{{ user_obj.username }}</td>
<td>{{ user_obj.age }}</td>
<td>{{ user_obj.get_gender_display }}</td>
<td>{{ user_obj.gender }}</td>
<td>
<button class="btn btn-toolbar btn-xs">編輯</button>
<!--注意，繫結ajax事件在for迴圈中不能加id，每for迴圈一次出現一個按鈕，
如果繫結id就意味著for迴圈後出現的按鈕id值一致，使用class=del
我們需要實現使用者點選刪除按鈕，後端能夠知道使用者到底要刪那條資料，
後端怎麼知道？主鍵。
自定義屬性
-->
<button class="btn btn-danger btn-xs del" delete_id="{{ user_obj.pk }}">刪除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$('.del').on('click',function (){
//先將當前標籤物件儲存，用變數指代當前被點選物件
let currentBtn = $(this);
//二次確認彈框
swal({
title: "確定刪除？?",
text: "你他孃的再想想！！!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "我就要刪!",
cancelButtonText: "不，我不想刪!",
closeOnConfirm: false,
closeOnCancel: false
},
//isConfirm 判斷使用者有沒有點選二次確認刪除按鈕
function(isConfirm) {
if (isConfirm) {
// 朝後端傳送ajax請求刪除資料之後，後端判斷是否有資料，再談下面的提示框，
$.ajax({
// 向delete/user/傳送ajax請求，並攜帶需要產出資料的主鍵值,傳遞主鍵值第一種方式
{#url:'/delete/user/' + currentBtn.attr('delete_id'),#}
// 傳遞主鍵值第二種方式，放在請求體中
url:'/delete/user/',
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
success:function (args){
//判斷響應狀態碼做不同的處理。
if (args.code === 1000){
swal("已刪除!", "你個吊毛", "success");
// 2.利用DOM操作，動態重新整理
// 當前端點選刪除，後端找到標籤所在行，透過DOM操作刪除此行，
// delete_id 上一個標籤是td,再上一個標籤為tr,需要刪的是當前標籤delete_id所在的這一行。
// currentBtn指代的是當前被操作物件，parent()拿到父標籤，兩個parent()拿到父標籤的父標籤
currentBtn.parent().parent().remove()
}else {
swal("慫逼", "在這裝JB毛", "info");
}
}
})
}
else {
swal("慫逼", "在這裝JB毛", "error");
}
});
})
</script>
</div>
</body>
</html>
<script>
$('.del').on('click',function (){
//先將當前標籤物件儲存，用變數指代當前被點選物件
let currentBtn = $(this);
//二次確認彈框
swal({
title: "確定刪除？?",
text: "你他孃的再想想！！!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "我就要刪!",
cancelButtonText: "不，我不想刪!",
closeOnConfirm: false,
closeOnCancel: false
},
//isConfirm 判斷使用者有沒有點選二次確認刪除按鈕
function(isConfirm) {
if (isConfirm) {
//朝後端傳送ajax請求刪除資料之後，後端判斷是否有資料，再談下面的提示框，
$.ajax({
//向delete/user/傳送ajax請求，並攜帶需要產出資料的主鍵值,傳遞主鍵值第一種方式
{#url:'/delete/user/' + currentBtn.attr('delete_id'),#}
//傳遞主鍵值第二種方式，放在請求體重
url:'/delete/user/',
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
// 形參args接收後端發來的值，args = {'code':'','msg':''}
success:function (args){
//判斷響應狀態碼做不同的處理。
if (args.code === 1000){
swal("已刪除!", "你個吊毛", "success");
// 刪除後需要過載整個頁面,不推薦
{#window.location.reload()#}
// 2.利用DOM操作，動態重新整理
// 當前端點選刪除，後端找到標籤所在行，透過DOM操作刪除此行，
// delete_id 上一個標籤是td,再上一個標籤為tr,需要刪的是當前標籤delete_id所在的這一行。
// currentBtn指代的是當前被操作物件，parent()拿到父標籤，兩個parent()拿到父標籤的父標籤
currentBtn.parent().parent().remove()
}else {
swal("慫逼", "在這裝JB毛", "info");
}
}
})
}
else {
swal("慫逼", "在這裝JB毛", "error");
}
});
})
</script>
後端邏輯程式碼：
def delete_user(request):
"""
前後端在使用ajax進行互動的時候，後端通常給ajax回撥函式返回一個字典格式的資料
字典返回到前端就是一個自定義物件，前端可以透過.的方式拿到想要的資料
:param request:
:return:
"""
if request.is_ajax():
if request.method == 'POST':
# code:1000 為響應狀態碼
back_dic = {'code':1000,'msg':''}
# 取到前端返回使用者想要刪除資料的主鍵值
delete_id = request.POST.get('delete_id')
models.User.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '資料已刪除'
# 需要告訴前端操作的結果
return JsonResponse(back_dic)
ajax批次插入資料：bulk_create()
def pl(request):
# 先將book插入10000條資料
for i in range(10000):
models.Book.objects.create(title='第%s本書' % i)
# 再將所有的資料查詢並返回給前端頁面
book_queryset = models.Book.objects.all()
return render(request,'pl.html',locals())
class Book(models.Model):
title = models.CharField(max_length=32)
{% for book_obj in book_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
此時前端可以接收到資料，但是載入時間至少需要五秒以上，太慢了。
使用bulk_create():
def pl(request):
book_list = []
for i in range(1000):
book_obj = models.Book(title='第%s本書' % i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
return render(request,'pl.html',locals())