zoukankan      html  css  js  c++  java
  • ajax及分页器

    前台:

    $('.btn').click(function(){

      $.ajax({

        url:'/ajaxload/'   

        type: 'get|post',

    data: {
    usr: 'abc',
    pwd: '123',
    },
    success: function(data) {
    // data为string类型数据
    },
    error: function(e) {
    // 请求失败分支
    }
    })
    })

    后台:

    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数据响应

    前台

    ```js
    $.ajax({
    ...,
    dataType: 'json', // 如果用HttpResponse返回数据可能出现请求失败
    data: {
    usr: 'abc',
    pwd: '123',
    },
    success: function(data) {
    // data为object类型
    }
    })

    后台

    ```python
    # HttpResponse返回json类型数据 (不建议)
    import json
    json_data = json.dumps({'msg': 'OK'}, ensure_ascii=False)
    return HttpResponse(json_data, content_type='application/json')

    from django.http import JsonResponse
    # JsonResponse返回json类型数据 (建议)
    data = {'msg': 'OK'}
    return JsonResponse(data, safe=False, json_dumps_params={'ensure_ascii': False})

    ## ajax - json数据请求(了解)

    前台

    ```js
    $.ajax({
    ...,
    // 按json格式提交json字符串数据
    contentType: 'application/json',
    // 将json数据格式化为字符串
    data: JSON.stringify({usr: 'abc', pwd: '123'}),
    success: function(data) {

    }
    })
    ```

    后台

    ```python
    # 后台的数据,在request对象的body中不再被主动解析到GET|POST中
    import json
    # 手动解析json字符串,转化字典并替代request.POST对象,就可以继续用request.POST获取数据
    json_dic = json.loads(request.body)
    request.POST = json_dic
    ...

    # 可以封装成装饰器

    ## Django分页模块

    ```python
    from django.core.paginator import Paginator

    # 分页对象列表
    book_list = Book.objects.all()
    # 分页对象
    paginator = Paginator(book_list, 6) # 分页对象列表,每一页对象(最大)数
    # 对象总个数
    count = paginator.count
    # 总分页树
    num_pages = paginator.num_pages
    # 页码列表(可迭代对象)
    page_range = paginator.page_range

    # 某一具体页
    page = paginator.page(3) # 具体第几页
    # 是否有上一页
    page.has_previous()
    # 上一页编码
    page.previous_page_number()
    # 是否有下一页
    page.has_next()
    # 下一页编码
    page.next_page_number()
    ```

    ## 批量插入数据

    ```python
    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)
    ```

    ## 分页器代码

    前台

    ```html
    <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>
    ```

    后台

    ```python
    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())

  • 相关阅读:
    京东精益敏捷教练分享:敏捷助力产品创新!
    设计规范 | 详解组件控件结构体系
    Axure响应式进阶
    通讯录表设计
    TEST1
    c#练习四单元总结
    窗体控件应用总结(1)
    .NET(c#理解)
    test2-11
    test1-1
  • 原文地址:https://www.cnblogs.com/suncunxu/p/10511716.html
Copyright © 2011-2022 走看看