django下使用ajax实现点击与翻页功能

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成功后执行的函数，这个函数功能是拼接表格，将返回的数据与样式拼接后返回给前端。