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})
大功告成了！启动服务器后，你就可以使用ajax方式进行点击搜索与翻页了。