Django入门教程第五篇：如何实现Ajax交互？

2026-05-27 15:451阅读0评论SEO基础

内容介绍
文章标签
相关推荐

本文共计2909个文字，预计阅读时间需要12分钟。

Django基础五之Ajax目录Django基础五之Ajax

1.Ajax介绍

2.Ajax前后端传值

2.1 方法一：HttpResponse直接返回 2.2 方法二：使用Json格式返回 2.1 HttpResponse返回json类型 2.2 JsonResponse返回

2.2 方法三：使用Ajax进行数据交互

Django基础五之Ajax

Django基础五之Ajax
- 1. Ajax介绍
- 2. Ajax前后端传值
  - 2.1 方法一HttpResponse直接返回
  - 2.2 方法二使用Json格式返回
    - 2.2.1 HttpResponse 返回json类型
    - 2.2.2 JsonResponse返回
  - 2.2 方法三使用HttpResponse 返回，但前端不做反序列化
  - 2.3 Ajax 发送POST请求
- 3. Ajax上传文件
- 4. Ajax提交Json格式
- 5. Django内置序列化
  - 5.1 内置序列化
  - 5.2 批量插入数据
- 6. Ajax结合layer弹窗实现二次确认
  - 6.1 ajax常用参数
  - 6.2 弹窗二次确认
- 7. 分页

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.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.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">&laquo;</span>
                                        </a>
                                </li>
                            {% else %}
                                <!--如果没有上一页则把上一页按钮禁用-->
                                <li class="disabled">
                                        <a href="" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</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">&raquo;</span>
                                        </a>
                                    </li>
                                {% else %}
                                    <!--如果没有下一页则把下一页按钮禁用-->
                                    <li class="disabled">
                                        <a href="" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</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)  # 当前的页码

标签：django基础五之Ajax

本文共计2909个文字，预计阅读时间需要12分钟。

Django基础五之Ajax目录Django基础五之Ajax

1.Ajax介绍

2.Ajax前后端传值

   2.1 方法一：HttpResponse直接返回   2.2 方法二：使用Json格式返回      2.1 HttpResponse返回json类型      2.2 JsonResponse返回2.2 方法三：使用Ajax进行数据交互

Django基础五之Ajax
目录Django基础五之Ajax1. Ajax介绍
2. Ajax前后端传值2.1 方法一HttpResponse直接返回
2.2 方法二使用Json格式返回2.2.1 HttpResponse 返回json类型
2.2.2 JsonResponse返回
2.2 方法三使用HttpResponse 返回，但前端不做反序列化
2.3 Ajax 发送POST请求
3. Ajax上传文件
4. Ajax提交Json格式
5. Django内置序列化5.1 内置序列化
5.2 批量插入数据
6. Ajax结合layer弹窗实现二次确认6.1 ajax常用参数
6.2 弹窗二次确认
7. 分页

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.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.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">&laquo;</span>
                                        </a>
                                </li>
                            {% else %}
                                <!--如果没有上一页则把上一页按钮禁用-->
                                <li class="disabled">
                                        <a href="" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</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">&raquo;</span>
                                        </a>
                                    </li>
                                {% else %}
                                    <!--如果没有下一页则把下一页按钮禁用-->
                                    <li class="disabled">
                                        <a href="" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</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)  # 当前的页码

标签：django基础五之Ajax

相关推荐

相关推荐

`相关推荐`

`相关推荐`