Django与ajax、分页器

ajax简单数据响应

ajax请求,后台只需要返回信息,所以不会出现render、redirect

模板层:

$('.btn').click(function() {
    $.ajax({
        url: '/ajaxload/',  // 请求路径
        type: 'get|post',  // 请求方式
        data: {  // get和post都以data字典方式携带数据
            usr: 'abc',
            pwd: '123',
        },
        success: function(data) {
            // data为string类型数据
        },
        error: function(e) {
            // 请求失败分支
        }
    })
})

view层:

def ajax_load(request):
    if request.is_ajax():
        if request.method == 'GET':
            usr = request.GET.get('usr', None)
            pwd = request.GET.get('pwd', None)
        if request.method == 'POST':
            usr = request.POST.get('usr', None)
            pwd = request.POST.get('pwd', None)
    return HttpResponse('OK')

ajax对json数据响应

模板层:

$.ajax({
    ...,
    dataType: 'json',  // 如果用HttpResponse返回数据可能出现请求失败,尽量不要使用该方式
    data: {
        usr: $('.usr').val(),
        pwd: $('.pwd').val(),
    },
    success: function(data) {
        console.log(data)
        // data为object类型
    }
})

view层:

def ajax(request):
    print(request.is_ajax())  # 是否是ajax请求
    if request.method == 'GET':  # 获取get请求数据
        usr = request.GET.get('usr', None)
        pwd = request.GET.get('pwd', None)
    if request.method == 'POST':  # 获取post请求数据
        usr = request.POST.get('usr', None)
        pwd = request.POST.get('pwd', None)
    
    # 返回字符串类型数据
    # return HttpResponse('OK')  # ***

    # 返回json类型数据
    dic = {'status': 'ok', 'msg': '登录成功'}
    data = json.dumps(dic, ensure_ascii=False)
    # 直接返回json模块处理后的json数据(json字符串),前台接收到的是一个json类型的字符串,需要前台自己处理
    # return HttpResponse(data)
    # 返回json字符串是,还告诉前台,该数据就是json类型字符串,设置响应头
    return HttpResponse(data, content_type='application/json')  # ****
    
    from django.http import JsonResponse
    # 返回json类型数据的终极方法
    dic = {'status': 'ok', 'msg': '登录成功'}
    return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})  # *****
    # 参数含义:
    # 返回值保证是字典类型
    # safe在False情况下就支持返回列表或字符串
    # 取消json的dumps方法采用的默认ascii编码中文

分页器

在页面显示分页数据,需要用到Django分页器组件

from django.core.paginator import Paginator

Paginator对象:    paginator = Paginator(user_list, 10)
# per_page: 每页显示条目数量
# count:    数据总个数
# num_pages:总页数
# page_range:总页数的索引范围,如: (1,10),(1,200)
# page:     page对象    
page对象:page=paginator.page(1)  # 具体第几页
# has_next              是否有下一页
# next_page_number      下一页页码
# has_previous          是否有上一页
# previous_page_number  上一页页码
# object_list           分页之后的数据列表
# number                当前页
# paginator             paginator对象

批量插入数据:

book_list = []
for i in range(100):
    book = Book(name='book%s' % i, price=11.11, publish_date='2018-1-1', publish_id=1)
    book_list.append(book)
# 操作对象列表,一次操作多少条数据
Book.objects.bulk_create(book_list, 20)

模板层:

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            {% if current_page.has_previous %}
                <a href="/book/?page={{ current_num|add:-1 }}" aria-label="Previous">
            {% else %}
                <a href="javascript:void(0)" aria-label="Previous">
            {% endif %}
            <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        {% if current_num == 1 %}
            <li class="active">
                {% else %}
            <li>
        {% endif %}
        <a href="/book/?page=1">1</a></li>
        <li><a href="javascript:void(0)">...</a></li>
        {% for num in page_range %}
            {% if current_num == num %}
                <li class="active">
                    {% else %}
                <li>
            {% endif %}
        <a href="/book/?page={{ num }}">{{ num }}</a></li>
        {% endfor %}
        <li><a href="javascript:void(0)">...</a></li>

        {% if current_num == num_pages %}
            <li class="active">
                {% else %}
            <li>
        {% endif %}
        <a href="/book/?page={{ num_pages }}">{{ num_pages }}</a></li>

        <li>
            {% if current_page.has_next %}
                <a href="/book/?page={{ current_num|add:1 }}" aria-label="Next">
            {% else %}
                <a href="javascript:void(0)" aria-label="Next">
            {% endif %}

            <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

view层:

def show_book(request):
    title = '图书详情'
    header = "图书管理系统"
    current_num = int(request.GET.get('page', 1))
    book_list = Book.objects.all()
    paginator = Paginator(book_list, 6)
    num_pages = paginator.num_pages
    if num_pages > 5:
        if current_num < 4:
            page_range = range(2, 5)
        elif current_num > paginator.num_pages - 3:
            page_range = range(num_pages - 3, num_pages)
        else:
            page_range = range(current_num - 1, current_num + 2)
    else:
        page_range = paginator.paginator
        
    current_page = paginator.page(current_num)

    return render(request, 'book.html', locals())

 

转载于:https://www.cnblogs.com/wangke0917/p/10512345.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django 中实现前后端分离的分页功能模块可以通过以下步骤进行: 1. 后端实现: - 创建一个 Django 视图函数,用于处理分页请求。可以使用 Django 的内置分页类 `Paginator` 来实现分页功能。 - 在视图函数中,获取前端传递过来的当前页码和每页显示的数量。可以通过 `request.GET` 获取 GET 请求中的参数。 - 使用 `Paginator` 类对数据进行分页,并获取当前页的数据。 - 将分页结果和当前页码等信息封装成 JSON 格式返回给前端。 2. 前端实现: - 在前端页面中,通过 AJAX 或者其他方式发送分页请求到后端视图函数。 - 在接收到后端返回的 JSON 数据后,解析数据并渲染到页面上,显示分页结果。 - 创建前端的分页组件,包括上一页、下一页、跳转等功能,以便用户进行翻页操作。 下面是一个简单的示例代码: 后端实现(views.py): ```python from django.core.paginator import Paginator from django.http import JsonResponse def get_paginated_data(request): data = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'] paginator = Paginator(data, 3) # 每页显示3条数据 page_number = request.GET.get('page') # 获取当前页码,默认为1 page_obj = paginator.get_page(page_number) current_page = page_obj.number total_pages = paginator.num_pages items = page_obj.object_list response_data = { 'current_page': current_page, 'total_pages': total_pages, 'items': items, } return JsonResponse(response_data) ``` 前端实现(JavaScript): ```javascript function getPaginatedData(page) { $.ajax({ url: '/get_paginated_data/', type: 'GET', data: {page: page}, success: function (response) { // 解析后端返回的 JSON 数据 var current_page = response.current_page; var total_pages = response.total_pages; var items = response.items; // 渲染数据到页面上 // ... }, error: function (xhr, status, error) { console.log(error); } }); } // 页面加载完成后,获取第一页的数据 $(document).ready(function () { getPaginatedData(1); }); // 翻页按钮点击事件 $('.pagination-button').click(function () { var page = $(this).data('page'); getPaginatedData(page); }); ``` 以上代码仅为示例,具体的实现方式可能因项目需求而有所不同。你可以根据实际情况进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值