Django基礎五之Ajax
1. Ajax介紹
2. Ajax前後端傳值
在輸入框一和輸入框二中分別輸入一個數字，然後點提交在第三個輸入框中顯示結果.
HTML程式碼:
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn">提交</button>
</div>
</div>
</div>
</body>
2.1 方法一HttpResponse直接返回
html頁面程式碼:
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到引數後使用Ajax向後提交
$.ajax({
url:"/index/", // 請求的地址
type:"post", // 請求的方式, 使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交給後端的資料
success: function (res){ // 返回成功走sucess,接收後端返回的結果
// 後端返回的資料都放在res裡面
console.log(res)
$('#d3').val(res)
// .val()裡面什麼都不寫為取值， 如果裡面寫資料為設定值
}
});
})
</script>
</body>
views.py程式碼
from django.shortcuts import render,HttpResponse
def index(request):
if request.method == 'POST': # if request.is_ajax(): 判斷是不是ajax請求
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
return HttpResponse(n3)
return render(request, 'index.html')
2.2 方法二使用Json格式返回
上面例子返回的是個數字，如果返回的是多個值，或者是不同的型別，那麼就要用json格式傳輸
2.2.1 HttpResponse 返回json型別
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
#if request.method == 'POST':
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
import json
# 序列化成json型別的字串
res_dict = json.dumps(res_dict)
return HttpResponse(res_dict)
return render(request, 'index.html')
前端處理Json
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到引數後使用Ajax向後提交
$.ajax({
url:"/index/", // 請求的地址
type:"post", // 請求的方式,使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交給後端的資料
success: function (res){ // 接收後端返回的結果
// 後端返回的資料都放在res裡面
// 後端傳過來的是json格式的string,所以要先反序列化
res_json = JSON.parse(res)
// 取值
console.log(res_json.n3)
$('#d3').val(res_json.n3)
}
});
})
</script>
</body>
2.2.2 JsonResponse返回
views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
def index(request):
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
return JsonResponse(res_dict)
return render(request, 'index.html')
前端處理
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到引數後使用Ajax向後提交
$.ajax({
url:"/index/", // 請求的地址
type:"post", // 請求的方式,使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交給後端的資料
success: function (res){ // 接收後端返回的結果
// 後端返回的資料都放在res裡面
console.log(res)
console.log(typeof(res))
// 後端使用JsonResponse直接返回一個物件，所以不用使用json反序列化(Django1.11依然要反序列化)，直接使用
$('#d3').val(res.n3)
}
});
})
</script>
</body>
使用JsonResponse返回的時候，它返回kwargs.setdefault('content_type', 'application/json') 直接返回的為application/json,ajax可以直接轉成物件型別.
2.2 方法三使用HttpResponse 返回，但前端不做反序列化
views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
#if request.method == 'POST':
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
print(res_dict)
import json
res_dict = json.dumps(res_dict)
return HttpResponse(res_dict)
return render(request, 'index.html')
前端處理
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input type="text" id="d1" >+
<input type="text" id="d2">=
<input type="text" id="d3">
<button id="d4" class="btn btn-warning">提交</button>
</div>
</div>
</div>
<script>
$("#d4").click(function (){
var num1 = $("#d1").val();
var num2 = $("#d2").val();
console.log(num1, num2);
//拿到引數後使用Ajax向後提交
$.ajax({
url:"/index/", // 請求的地址
type:"post", // 請求的方式,使用method()也可以
data:{num1:num1, num2:num2}, //指定要提交給後端的資料
dataType:"json", // 指定後端返回的資料格式
success: function (res){ // 接收後端返回的結果
// 後端返回的資料都放在res裡面
console.log(res)
console.log(typeof(res))
//指定了格式為json，則直接使用即可
$('#d3').val(res.n3)
}
});
})
</script>
</body>
2.3 Ajax 傳送POST請求
1. 在和form表單一塊用的時候,form表單裡不能寫button 和input type="submit",因為在form表單裡都是提交，和ajax一塊用時form提交一次，ajax再提交一次，就會有問題。所以在form表單中使用<input type='button'>, 要麼不用form表單
示例： 利用資料庫驗證登入使用者名稱和密碼，成功跳轉到別的網站上，不成功提示驗證失敗:
HTML程式碼：
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
username:<input type="text" id="user" class="form-control">
password:<input type="password" id="pwd" class="form-control">
<input type="button" id="btn" value="提交" class="btn btn-success"><span id="sp1" ></span>
</form>
</div>
</div>
</div>
<script>
$('#btn').click(function (){
var username=$("#user").val(); # 取使用者的輸入
var password=$("#pwd").val();
console.log(username, password);
$.ajax({
url:"",
method:"post",
data:{username:username, password:password},
success:function (DATA){
if (DATA.status == 100){ # 看返回值是不是設定的成功的狀態碼，
location.href="https://www.jd.com"
}
else {# 不是的話則在後面新增提示資訊。
$("#sp1").html(DATA.msg).css({'color':'red'})
}
}
})
})
</script>
</body>
後端程式碼:
views.py
def login(request):
if request.is_ajax():
name = request.POST.get('username')
pwd = request.POST.get('password')
from lib01 import models
res = models.UserVerfiy.objects.filter(username=name, password=pwd)
print(res)
data_dict = {'status':100, 'msg':None}
if res:
data_dict['msg']="驗證成功"
else:
data_dict['status']=101
data_dict['msg'] = "驗證失敗"
return JsonResponse(data_dict)
return render(request,"login.html")
3. Ajax上傳檔案
HTTP的POST請求有三種編碼格式:
urlencoded: 預設 可以使用request.POST取值
form-data: 上傳檔案，可以使用request.POST取值
json: ajax傳送json格式資料，不可以使用request.POST取值
使用Ajax和form表單，預設都是urlencoded格式
如果上傳檔案: form表單指定格式(enctype="multipart/form-data")
如果編碼方式為urlencoded格式，在body中格式：
user=xxx&password=xxx
使用Ajax上傳檔案：
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p>Ajax上傳檔案</p>
<input type="file" id="f1">
<button id="f2" class="btn btn-success">提交</button>
</form>
</div>
</div>
</div>
<script>
$("#f2").click(function (){
var filedata=new FormData() //例項化得到一個目標FormData物件
//filedata.append('name',$('#f1').val()) //追加一個name對應的值
var upFile=$('#f1')[0].files[0]
filedata.append('myfile',upFile) // 追加檔案
$.ajax({
url:"",
type:"post",
//上傳檔案加上下面兩行
processData:false, //不預處理資料
contentType:false, // 不指定編碼，FormData預設是formdata格式
data: filedata,
success:function (data){
console.log(data)
}
})
})
</script>
</body>
views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
def index(request):
if request.is_ajax():
myfile = request.FILES.get('myfile')
print(type(myfile))
with open(myfile.name, 'wb') as f:
for i in myfile:
f.write(i)
return HttpResponse("上傳成功")
return render(request, 'index.html')
4. Ajax提交Json格式
使用ajax提交json格式的資料，要指定編碼格式：
contentType:'application/json'
在前端指定編碼格式，後端收到後要反序列出來，才能使用。
$.ajax({
url:"",
type:"post",
contentType:'application/json', // 指定編碼，才能向後端發json格式
//序列化成json格式
filedata = JSON.stringify(name:$('#id1').val(),password:$('id2').val())
data: filedata,
success:function (data){
console.log(data)
}
})
views.py
後端處理，拿到資料後要先反序列化:
import json
# request.get預設是取不出來json格式的。使用request.body來取出：
filedata = request.body
file_json = json.loads(filedata)
name = file_json.get('name')
password = file_json.get('password')
retrun HttpsRespone("OK")
5. Django內建序列化
5.1 內建序列化
把物件轉成json格式字串，目前要做序列化要自己迴圈，然後拼一個字典，再去序列化成json格式
from django.core import serializers
def book_list(request):
book_list=models.Book.objects.all()
res = serializers.serialize('json', book_list)
return HttpResponse(res)
5.2 批量插入資料
def add_book():
book_list =[]
for i in range(1000):
book=models.Books(name="圖書名%s"%i, price="價格%s" %i)
book_list.append(book)
models.Books.objects.bulk_create(book_list,batch_size=100)
# batch_size 每次插入多少
使用faker模組生成測試資料：
pip3 install faker
>>> from faker import Faker
>>> faker = Faker('zh_CN')
>>> print(faker.name())
田巖
>>> print(faker.name())
黃柳
>>> print(faker.address())
雲南省婷縣錫山汕尾街V座 503156
>>> print(faker.phone_number())
13996473292
>>> print(faker.phone_number())
18959779669
6. Ajax結合layer彈窗實現二次確認
6.1 ajax常用引數
1.url:
要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。2.type:
要求為String型別的引數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支援。3.timeout:
要求為Number型別的引數，設定請求超時時間（毫秒）。此設定將覆蓋$.ajaxSetup()方法的全域性設定。4.async:
要求為Boolean型別的引數，預設設定為true，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為false。注意，同步請求將鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行。5.cache:
要求為Boolean型別的引數，預設為true（當dataType為script時，預設為false），設定為false將不會從瀏覽器快取中載入請求資訊。6.data:
要求為Object或String型別的引數，傳送到伺服器的資料。如果已經不是字串，將自動轉換為字串格式。get請求中將附加在url後。防止這種自動轉換，可以檢視 processData（防止自動轉換）選項。物件必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是陣列，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。7.dataType:
要求為String型別的引數，預期伺服器返回的資料型別。如果不指定，JQuery將自動根據http包mime資訊返回responseXML或responseText，並作為回撥函式引數傳遞。可用的型別如下：
xml：返回XML文件，可用JQuery處理。
html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行。
script：返回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache引數。注意在遠端請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON資料。
jsonp：JSONP格式。使用SONP形式呼叫函式時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函式名，以執行回撥函式。
text：返回純文字字串。8.beforeSend：
這個引數主要是為了在向伺服器傳送請求前，執行一些操作。要求為Function型別的引數，傳送請求前可以修改XMLHttpRequest物件的函式，例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是惟一的引數。
function(XMLHttpRequest){undefined
this; //呼叫本次ajax請求時傳遞的options引數
}
9.complete：
要求為Function型別的引數，請求完成後呼叫的回撥函式（請求成功或失敗時均呼叫）。引數：XMLHttpRequest物件和一個描述成功請求型別的字串。
function(XMLHttpRequest, textStatus){undefined
this; //呼叫本次ajax請求時傳遞的options引數
}10.success：
要求為Function型別的引數，請求成功後呼叫的回撥函式，有兩個引數。
(1)由伺服器返回，並根據dataType引數進行處理後的資料。
(2)描述狀態的字串。
function(data, textStatus){undefined
//data可能是xmlDoc、jsonObj、html、text等等
this; //呼叫本次ajax請求時傳遞的options引數
}11.error:
要求為Function型別的引數，請求失敗時被呼叫的函式。該函式有3個引數，即XMLHttpRequest物件、錯誤資訊、捕獲的錯誤物件(可選)。ajax事件函式如下：
function(XMLHttpRequest, textStatus, errorThrown){undefined
//通常情況下textStatus和errorThrown只有其中一個包含資訊
this; //呼叫本次ajax請求時傳遞的options引數
}12.contentType：
要求為String型別的引數，當傳送資訊至伺服器時，內容編碼型別預設為"application/x-www-form-urlencoded"。該預設值適合大多數應用場合。13.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){undefined
//返回處理後的資料
return data;
}14.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){undefined
//返回處理後的資料
return data;
}15.global：
要求為Boolean型別的引數，預設為true。表示是否觸發全域性ajax事件。設定為false將不會觸發全域性ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。16.ifModified：
要求為Boolean型別的引數，預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false，即忽略頭資訊。17.jsonp：
要求為String型別的引數，在一個jsonp請求中重寫回撥函式的名字。該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。18.username：
要求為String型別的引數，用於響應HTTP訪問認證請求的使用者名稱。19.password：
要求為String型別的引數，用於響應HTTP訪問認證請求的密碼。20.processData：
要求為Boolean型別的引數，預設為true。預設情況下，傳送的資料將被轉換為物件（從技術角度來講並非字串）以配合預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊，請設定為false。21.scriptCharset：
要求為String型別的引數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠端的內容編碼不同時使用。
6.2 彈窗二次確認
先要下載layer，地址:https://github.com/sentsin/layer/releases/download/v3.5.1/layer-v3.5.1.zip
下載後放在專案的static目錄，並在settings.py裡配置好靜態檔案目錄。
HTML程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="/static/layer-v3.5.1/layer/layer.js"></script> // 匯入layer.js
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>passowrd</th>
<th>edit</th>
</tr>
</thead>
<tbody>
{% for foo in userObj %}
<tr>
<td class="warning">{{ foo.id }}</td>
<td class="success">{{ foo.username }}</td>
<td class="info">{{ foo.password }}</td>
<td class="danger">
<a onclick="del_function({{ foo.id }})" id="d_{{ foo.id }}">刪除</a> /*這裡a標籤裡沒有href這是為了去掉它自身帶的提交功能，還有個方法是: href="javascript:;"*/
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
function del_function(id) {
layer.confirm("確定要刪除嗎？", { //
btn: ['確定', '取消'],
}, function () {
$.ajax({
url: "", // 向當前專案提交
type: "post", // 提交方式
data: {id: id}, // 把使用者的ID傳給後面
success: function (data) {
if (data.static == 200) { // 後端返回結果，如果等於200則執行成功
layer.msg(data.msg,{icon:1},function (){ // icon:1 layer裡的圖示
location.reload(); // 重新載入頁面，否則刪除不重新整理刪除的資料還在頁面上
})
} else {
layer.msg(data.msg,{icon:2})
}
}
})
}
)
}
</script>
</body>
</html>
views.py程式碼：
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
from lib01 import models
def userList(request):
res={}
if request.method == "POST":
user_id = request.POST.get('id')
print(user_id, type(user_id))
user_up = models.UserVerfiy.objects.filter(id=user_id).update(is_delete=1)
print(user_id, type(user_id))
if user_up:
res['static']=200
res['msg']="刪除成功"
else:
res['static']=400
res['msg']="刪除失敗"
return JsonResponse(res)
userObj = models.UserVerfiy.objects.filter(is_delete=0).all()
return render(request, "userlist.html", locals())
urls.py路由:
from django.contrib import admin
from django.urls import path
from lib01 import views
urlpatterns = [
path('userlist/', views.userList),
]
7. 分頁
HTML程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">使用者資訊</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{% for user in Page.object_list %}
<tr>
<td class="info">{{ user.id }}</td>
<td class="success">{{ user.name }}</td>
<td class="warning">{{ user.address }}</td>
<td class="danger">{{ user.iphone }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
{% if Page.has_previous %}
<!--檢查是否有上一頁-->
<li>
<a href="/userlist/?page={{ Page.previous_page_number }}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% else %}
<!--如果沒有上一頁則把上一頁按鈕禁用-->
<li class="disabled">
<a href="" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
<!--分的頁數-->
{% for foo in page_range %}
{% if current_num == foo %}
<!--選中哪個頁數那個頁數就變色-->
<li class="active"><a href="/userlist/?page={{ foo }}">{{ foo }}</a></li>
{% else %}
<li><a href="/userlist/?page={{ foo }}">{{ foo }}</a></li>
{% endif %}
{% endfor %}
{% if Page.has_next %}
<!--檢查是否有下一頁-->
<li>
<a href="/userlist/?page={{ Page.next_page_number }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% else %}
<!--如果沒有下一頁則把下一頁按鈕禁用-->
<li class="disabled">
<a href="" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>
後端程式碼:views.py
from django.shortcuts import render
# Create your views here.
from pagination import models
from django.core.paginator import Paginator
def userlist(request):
user_obj = models.UserList.objects.all().order_by('id')
current_num = int(request.GET.get("page",1)) # 獲取當前頁面的頁數
paginator = Paginator(user_obj,50)
"""
Paginator(user_obj,50) 使用這個方法資料庫那必須加.order_by() 否則會報錯，報錯資訊:
UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <class 'pagination.models.UserList'> QuerySet. paginator = Paginator(user_obj,50)
"""
# 使用的try的目的是如果人為的讓page等於一個超過範圍的數，讓它預設在第一頁
try:
# 分頁的page的物件和方法
Page = paginator.page(current_num)
except Exception as e:
current_num = 1
Page = paginator.page(current_num)
# 做成一個左5 右5 的分頁
if paginator.num_pages >11:
# 如果總頁數大於11，
# 當前頁減5個是不是小於1， 小於1的話顯示1到11個。
if current_num - 5 < 1:
page_range = range(1,12)
# 當前頁加5個是不是大於總頁數， 大於總頁數的話顯示則顯示最後11個。
elif current_num + 5 > paginator.num_pages:
page_range = range(paginator.num_pages - 10, paginator.num_pages +1)
# 上面的都不符合則直接顯示當前頁前五個，和當前頁後5個
else:
page_range = range(current_num-5,current_num+6)
else:
# 如果總頁數小於11則直接顯示
page_range = paginator.page_range
return render(request, "userlist.html", locals())
paginator = Paginator(user_obj,50) # 每一頁顯示的條數，這裡顯示50條
# 分頁的屬性:
print(paginator.count) # 資料總條數
print(paginator.num_pages) # 總頁數
print(paginator.per_page) # 每頁顯示條數
print(paginator.page_range) # 取範圍 range(1, 21)
print(paginator.page(1)) # 反回一個頁的物件， 數字為幾則拿第幾頁的資料
Page = paginator.page(current_num)
print(Page.has_next()) # 是否有下一頁
print(Page.next_page_number()) # 下一頁的頁碼數
print(Page.has_previous()) # 是否有上一頁
print(Page.previous_page_number()) # 上一頁的頁碼數
print(Page.object_list) # 當前頁的
print(Page.number) # 當前的頁碼