Django 之Ajax和自定义分页

1、AJAX（Asynchronous javascript And XML）

 　　1.1 什么时ajax

　　　　异步Javascript和XML， 即使用Javascript语言和服务器进行异步交互，传输的数据为XML(也可以json)

　　　　　　同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　　　　　异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

　　　　优点：

　　　　　　无需刷新整个页面，可以实现浏览器页面局部刷新

　　　　　　使用Javascript技术向服务器发送异步请求

　　1.2 jQuery实现ajax数据传输

$.ajax({
    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
    url:'',
    //type为标定你这个ajax请求的方法
    type:'POST',
    //data后面跟的就是你提交给后端的数据
    data:{'username':$(this).val()},
    //success为回调函数，参数data即后端给你返回的数据
    success:function (data) {
        ret=JSON.parse(data);  // 后端如果传输json格式数据，或可以.方式获取值
        if (ret['flag']){
            $('p>span').removeClass('hide');
        }
    }
});
// 说明： 传输的数据data内只能有数值和字符串。 
//     如果要传输数组必须加上键值对：traditional: ture,

　　　　后端取数据

request.POST或request.GET获得

# request.POST 只能解析编码格式为urlencoded以及text/plain

　　1.3 jQuery实现ajax传输json格式数据

  $('#d1').click(function () {
        $.ajax({
            // 前面的变量值都是固定写法,url,type,data
            url:'',  // 提交的路径
            type:'post',  // 提交的方式
            data:JSON.stringify({'name':'jason','age':'18'}),  // 提交的数据
            contentType:'application/json',  // 告诉后端当前数据的格式为json格式 
            success:function (data) {  // 回调函数,会将后端处理好的数据传给data形参
                $('#i3').val(data)
            }
        })
    })

　　　　后端取数据

request.body  # 得到的是bytes格式的字典

　　1.3 jQuery实现ajax文件上传

　　　　注意点：

　　　　　　1. 必须用内置对象:new FormData

　　　　　　2. 获取input框文件对象:$('#i1')[0].files[0]

　　　　　　3. 指定两个参数为false:

　　　　　　　　processData:false,  // 不要处理我的数据 name=jason&password=123

　　　　　　　　contentType:false,  // 不需要指定任何编码,就按照我的formdata内部的数据格式即可

　　　　　　4. 后端按正常的文件上传从request.FILES里面获取文件对象

　　　　　　5. formdata也支持传普通的键值对,后端仍然可以在request.POST里面获取到

$("#btn").click(function () {
  //上传文件,必须用FormData,生产一个formdata对象
  var formdata=new FormData();
  formdata.append('name',$("#name").val()); # 也支持传键值对的数据
  //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
  formdata.append('myfile',$("#myfile")[0].files[0]);
  $.ajax({
    url:'/index/',
    type:'post',
    //不预处理数据,(name=lqz&age=18)
    processData:false,
    //指定往后台传数据的编码格式(urlencoded,formdata,json)
    //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了
    contentType:false,
    data:formdata,
    success:function (data) {
      alert(data)
    }
  })

　　　　后端获取

def plus(request):
if request.method == 'POST':
  print(request.FILES)
  file_obj = request.FILES.get('myfile')
  with open(file_obj.name,'wb') as f:
    for line in file_obj:
      f.write(line)
  return HttpResponse('ok')
return render(request,'index.html')

2、自定义分页

 　　定义分页的类

class Pagination(object):
    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数

        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page=request.GET.get("page", 1),all_count=queryset.count())
        queryset = queryset[page_obj.start:page_obj.end]
        # 前端需要使用page_html {{ page_html | safe }}
        page_html = page_obj.page_html()
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page < 1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num

        # 总页码
        self.all_pager = int((all_count+per_page_num-1)/per_page_num)      

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个：
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append('''
                    <nav aria-label='Page navigation>'
                    <ul class='pagination'>
                ''')
        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'
        else:
            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)
            else:
                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = '<li class="disabled"><a href="#">下一页</a></li>'
        else:
            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append('''
                                           </nav>
                                           </ul>
                                       ''')
        return ''.join(page_html_list)

　　后端调用

def publisher_list(request):
    # 从URL中取当前访问的页码数
    current_page = int(request.GET.get('page'))
    # 比len(models.Publisher.objects.all())更高效
    total_count = models.Publisher.objects.count()
    page_obj = Pagination(current_page, total_count, request.path_info)
    data = models.Publisher.objects.all()[page_obj.start:page_obj.end]
    page_html = page_obj.page_html()
    return render(request, "publisher_list.html", {"publisher_list": data, "page_html": page_html})

　　前端使用

{{ page_html|safe }}