django下使用ajax實現點選與翻頁功能
阿新 • • 發佈：2019-02-18
ajax是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁如果需要更新內容，就必須過載整個頁面。下面就介紹一下在django框架中怎樣使用ajax實現點選事件與內容翻頁功能。
準備工作
django專案需要建立好，jQuery檔案需要下載並放到django專案的static檔案中，模板也需要建立好。那麼下面我們就可以開始了。
操作
我們需要先新增輸入框，按鈕，ajax請求成功後資料返回後所放的位置，上一頁下一頁按鈕所放位置。
#style樣式可以忽略，對整個功能方面沒影響 <input type="text" class="form-control" name="content" id="content" placeholder="Search for..." style="width: 400px;height:40px;right: 130px;top: 15px;background: #000000;color: #eeeeee;border-radius: 6px"> <button class="btn btn-default" id="search" type="button" style="top: 30px;right: 180px;border-radius: 6px">搜尋</button> #放置資料 <div id="search_content"></div> #放置上一頁，下一頁按鈕 <nav class="navbar navbar-default navbar-fixed-bottom" id="nav_btn" style="left:700px;right: 580px;background: #ffffff;margin: 0;padding: 0"></nav>
接下來匯入jquery檔案。
#django中模板引擎使用方法，不懂的可以查詢一下，此處不進行解釋
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
新增點選事件。此處ajax使用get請求，url代表請求的地址，data為要向url所傳送的資料，success為傳送成功後執行的程式，此處使用一個函式來進行處理。
<script type="text/javascript"> $(document).ready(function(){ {# 搜尋按鈕點選事件 #} $('#search').click(function () { $.ajax({ type: 'GET', url: 'http://127.0.0.1:8000/info/zhilian_search/', data:{"content":$("#content").val(),"page":0}, success:function (results) { render(results) } }); }); }); </script>
ajax成功後執行的函式，這個函式功能是拼接表格，將返回的資料與樣式拼接後返回給前端。
{# 拼接網頁 #} function render(results) { var html = '<table class="table table-striped table-hover"><tr class="success"><td>職位</td><td>工資</td><td>地點</td><td>經驗</td><td>學歷</td><td>要求</td></tr>'; for (var i = 0; i < results['records'].length; i++) { var record = results['records'][i]; html += '<tr>'; html += '<td>'+record['job_title']+'</td>'; html += '<td>'+record['job_salary']+'</td>'; html += '<td>'+record['job_address']+'</td>'; html += '<td>'+record['job_experience']+'</td>'; html += '<td>'+record['job_education']+'</td>'; html += '<td>'+record['job_content']+'</td>'; } $('#search_content').html(html+"</table>"); }
下面我們看一下view.py。
from django.shortcuts import render
from zhilian.models import Information
from django.db.models import Q
from django.http import JsonResponse
def zhilian_search(request):
try:
content = request.GET['content']
except:
content=None
request.session['content'] = content
infos = Information.objects.filter(Q(job_content__icontains = request.session.get('content')))
info_list = []
for i in range(len(infos)):
info_list.append({"job_title":infos[i].job_title,
"job_salary":infos[i].job_salary,
"job_address":infos[i].job_address,
"job_experience":infos[i].job_experience,
"job_education":infos[i].job_education,
"job_content":infos[i].job_content[0:50]+'....',})
return JsonResponse({"records":info_list})如果你看到了此處，那麼現在ajax非同步請求已經完成了。但是如果你還想要了解分頁功能，那麼還沒有結束。
在前端頁面中新增上一頁、下一頁與搜尋函式。
{# 上一頁 #}
function previous(page) {
page = page-1;
search(page);
}
{# 下一頁 #}
function next(page) {
page = page +1;
search(page);
}
{# 搜尋，與按鈕點選事件中函式的完全相同 #}
function search(page) {
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:8000/info/zhilian_search/',
data:{"content":$("#content").val(),"page":page},
success:function (results) {
render(results)
}
});
}render函式我們也需要改一改。
{# 拼接網頁 #}
function render(results) {
var html = '<table class="table table-striped table-hover"><tr class="success"><td>職位</td><td>工資</td><td>地點</td><td>經驗</td><td>學歷</td><td>要求</td></tr>';
for (var i = 0; i < results['records'].length; i++) {
var record = results['records'][i];
html += '<tr>';
html += '<td>'+record['job_title']+'</td>';
html += '<td>'+record['job_salary']+'</td>';
html += '<td>'+record['job_address']+'</td>';
html += '<td>'+record['job_experience']+'</td>';
html += '<td>'+record['job_education']+'</td>';
html += '<td>'+record['job_content']+'</td>';
}
$('#search_content').html(html+"</table>");
{# 上一頁，下一頁 #}
html = '<div class="container">';
if (results['pages']>1){
if (results['page']>0){
html += '<a id="previous" href="javascript:void(0)" style="background: #000000;color:#ffffff" class="btn btn-default" onmouseover="this.style.background='+"'#ffffff';this.style.color="+"'#000000'"+'" onmouseout="this.style.background='+"'#000000';this.style.color="+"'#ffffff'"+'" onclick="previous('+results["page"]+')">上一頁</a>'
}
else {
html += '<a id="previous" href="javascript:void(0)" class="btn btn-default disabled" onclick="previous('+results["page"]+')">上一頁</a>'
}
if (results['page']+1<results['pages']){
html += '<a id="next" href="javascript:void(0)" class="btn btn-default" onmouseover="this.style.background='+"'#000000';this.style.color="+"'#ffffff'"+'" onmouseout="this.style.background='+"'#ffffff';this.style.color="+"'#000000'"+'" onclick="next('+results["page"]+')">下一頁</a></div>';
}
else {
html += '<a id="next" href="javascript:void(0)" class="btn btn-default disabled" onclick="next('+results["page"]+')">下一頁</a></div>';
}
}
$("#nav_btn").html(html);
}此刻，前端頁面已經大功告成了，我們下面只需再修改一下views.py中的程式碼就可以了。
#各種包見上面程式碼，此處不再重複寫了
def zhilian_search(request):
try:
content = request.GET['content']
except:
content=None
request.session['content'] = content
try:
page = request.GET['page']
page = int(page)
except:
page = 0
infos = Information.objects.filter(Q(job_content__icontains = request.session.get('content')))
pages = math.ceil(len(infos)/10)
info_list = []
try:
for i in range(10):
info_list.append({"job_title":infos[page*10+i].job_title,
"job_salary":infos[page*10+i].job_salary,
"job_address":infos[page*10+i].job_address,
"job_experience":infos[page*10+i].job_experience,
"job_education":infos[page*10+i].job_education,
"job_content":infos[page*10+i].job_content[0:50]+'....',})
except:
info_list = []
for i in range(len(infos)%10):
info_list.append({"job_title": infos[page * 10 + i].job_title,
"job_salary": infos[page * 10 + i].job_salary,
"job_address": infos[page * 10 + i].job_address,
"job_experience": infos[page * 10 + i].job_experience,
"job_education": infos[page * 10 + i].job_education,
"job_content": infos[page * 10 + i].job_content[0:50] + '....', })
return JsonResponse({"records":info_list,"page":page,"pages":pages})