ajax前后端数据传输的编码格式，Ajax提交json格式的数据、Ajax提交文件数据、Ajax实现弹窗的二次确认、批量增加数据、分页的原理及推导、分页类的使用

【1】前后端数据传输的编码格式

1、get请求方式没有编码方式

• 提交post请求的三种方式
  • form表单
  • Ajax
  • api工具

form表单的post请求：

        1、默认的编码格式是：urlencoded

        2、数据传输形式：title=' '&print=' '&publish=' '

 

Django后端通过request.POST方式接收数据

  

文件数据通过request.FILES方式接收数据，不能使用request.POST

 

ajax提交post请求

        1、默认情况下，Ajax提交的数据后端还是在request.POST中接受的

        2、默认的编码格式：urlencoded，需要修改contentType类型：json格式的。

                例如：contentType:application/json

 

注意：对于符合urlencoded格式的数据后端都是在request.POST中接收数据的

 【2】Ajax提交json格式的数据

def index(request):
        if request.method = 'POST':
            json_bytes = request.body    # 接收二进制的数据
            json_str = json_bytes.decode('utf-8')    # 将二进制的数据转为字符串
            import json
            json_dict = json.loads(json_str)    # 反序列化                
    return render(request,'index.html')


<script>
    $.ajax({
            url:'',                            # 不写就是朝当前地址提交
            type:'post',                        # 请求方式
            data:JSON.stringify({a=1,b=2}),      # 序列化的数据
            contentType:'application/json',      #   json格式
            success:function(){                # 回调函数
                                                    
            }
         })
</script>

【3】Ajax提交文件数据

<input type='file' name='file' id='myfiles'>
<button class='btn'></button>
 
<script>
    $(.btn).onclick(function(){
        var MyFormData = new FormData;
        var myfile = $("#myfiles")[0].files[0];
        var MyFormData.append('file',myfile);
        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            contentType:false,
            processData:false,
            success:function(res){
            
            }    
        })
    })
</script>



def index(request):
    if request.method == 'POST':
        request.FILES.get('file')

【4】批量插入数据

bulk_list = []

for i in range(1000):

    user_obj = models.UserInfo(username='kevin%s' % i)    # 实例化类得到对象
    bulk_list.append(user_obj)
 
models.Userinfo.objects.bulk_create(bulk_list)

【5】Ajax结合layer弹窗实现二次确认

layer 弹出层组件 - jQuery 弹出层插件

【6】分页器

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:  最多显示的页码个数
        """
        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

        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        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

    @property
    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)