• Ajax相关知识

    目录

    一.前后端传输数据的编码格式（contentType）

    1.form表单

    2.编码格式

    3.Ajax

    4.代码演示

    后端

    前端HTML

    二.Ajax发送JSON格式数据

    1.引入

    后端

    前端

    2.后端

    接收到的数据为空

    解决办法

    3.request方法判断Ajax

    4.总结

    前端在通过ajax请求发送数据的时候，一定要注参数修改

    数据是真正的JSON格式数据

    Django后端不会帮我们处理JSON格式数据，需要自己手动处理request.body中的数据

    三.Ajax发送文件数据

    1.Ajax发送文件数据需要借助js内置对象formdata

    前端

    后端

    发送文件数据的格式

    2.结论

    Ajax发送文件数据需要利用内置对象FormData

    需要指定两个关键性的参数

    Django后端能直接自动识别到FormData对象

    四.分页

    1.前言

    2.自定义分页器封装代码

    3.后端使用方法

    4.前端使用方法

    一.前后端传输数据的编码格式（contentType）

    主要研究POST请求数据的编码格式

    因为GET请求数据就是直接放在url后面的

    • 可以朝后端发送post请求的方式
      • form请求
      • ajax请求

    1.form表单

    • 前后端传输数据的格式
      • urlencoded
      • formdata
      • json

    2.编码格式

    • form表单默认的编码格式是urlencoded
      • 通过查看请求头中的Content-Type参数
    1. text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
    2. Accept-Encoding:gzip, deflate, br
    3. Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
    4. Cache-Control:no-cache
    5. Connection:keep-alive
    6. Content-Length:27
    7. Content-Type:application/x-www-form-urlencoded
    • 携带数据格式
    username=666666&password=66
    • Django后端针对urlencoded编码格式的数据会自动帮我们解析封装到request.POST中
    • 如果编码格式改为formdata，那么针对普通的键值对还是解析到request.POST中，而其他文件格式的数据解析到request.FILES中
    • form表单无法发送json格式数据

    3.Ajax

    1. Accept:*/*
    2. Accept-Encoding:gzip, deflate, br
    3. Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
    4. Cache-Control:no-cache
    5. Connection:keep-alive
    6. Content-Length:31
    7. Content-Type:application/x-www-form-urlencoded; charset=UTF-8
    • 默认的编码格式是urlencoded
    • 数据格式
    username=dream&password=1314521
    • Django后端针对urlencoded编码格式的数据会自动帮我们解析封装到request.POST中--->username = dream&password=123456

    4.代码演示

    后端

    1. def index(request):
    2.     if request.method == 'POST':
    3.         print(request.POST)
    4.         print(request.FILES)
    5.     return render(request, 'index.html')

    前端HTML

    1. "" method="post" enctype="multipart/form-data">
    2.     
      username: <input type="text" name="username" class="form-control">
    3.     
      password: <input type="password" name="password" class="form-control">
    4.     
      file: <input type="file">
    5.     
      <input type="submit" class="btn btn-success">
    6.     
      <input type="button" class="btn btn-danger" value="按钮" id="d1">
    8.

    二.Ajax发送JSON格式数据

    前后端传输数据的时候一定要保证编码格式数据与真正的数据格式是一致的

    1.引入

    后端

    1. def ab_json(request):
    2.     if request.method == 'POST':
    3.         print(request.POST) #
    4.     return render(request, 'ab_json.html')

    前端

    2.
    • 请求标头携带的数据格式
      • 已成功转换为JSON格式
    {"username":"dream","password":521521}

    2.后端

    接收到的数据为空

    1. def ab_json(request):
    2.     if request.method == 'POST':
    3.         print(request.POST) #
    4.     return render(request, 'ab_json.html')

    Django 针对JSON格式的数据不会做任何处理

    针对JSON格式的数据需要自己手动处理

    解决办法

    1. def ab_json(request):
    2.     print(request.is_ajax())  # True
    3.     if request.method == 'POST':
    4.         print(request.POST)  # 
    5.  
    6.     print(request.body)  # 返回的是二进制数据 ：b'{"username":"dream","password":521521}'
    7.     # 针对JSON格式的数据需要自己手动处理
    8.     json_bytes = request.body
    9.  
    10.     # （1）方式一：先解码 再转换数据格式
    11.     json_str = json_bytes.decode('utf-8')
    12.     json_dict = json.loads(json_str)
    13.     print(json_dict, type(json_dict))  # {'username': 'dream', 'password': 521521} 
    14.  
    15.     # （2）方式二：json.loads(二进制数据) 内部可以自动解码再反序列化
    16.     json_dict_loads = json.loads(json_bytes)
    17.     print(json_dict_loads, type(json_dict_loads))  # {'username': 'dream', 'password': 521521} 
    18.  
    19.  
    20.     return render(request, 'ab_json.html')

    3.request方法判断Ajax

    request.is_ajax()

    返回当前请求是否是ajax请求，返回布尔值

    print(request.is_ajax()) 正常浏览器网址回车提交的是 GET 请求 - 结果是False 当我们发送ajax请求后 - 结果是True

    4.总结

    前端在通过ajax请求发送数据的时候，一定要注参数修改

    1. // 不指定参数，默认就是 urlencoded
    2. contentType: 'application/json',

    数据是真正的JSON格式数据

    发送的数据一定要符合JSON格式

    或经过JSON序列化再传输

    Django后端不会帮我们处理JSON格式数据，需要自己手动处理request.body中的数据

    通过Ajax传过来的数据是二进制数据

    在request.body中要经过自己的反序列化才能拿到我们想要的数据

    三.Ajax发送文件数据

    1.Ajax发送文件数据需要借助js内置对象formdata

    前端

    1. username: <input type="text" name="username" id="d1">
    2. password: <input type="password" name="password" id="d2">
    3. file: <input type="file" id="d3">
    4.  
    6.  
    7.

    后端

    1. def ab_file(request):
    2.     if request.is_ajax():
    3.         if request.method == 'POST':
    4.             print('POST::>>', request.POST)
    5.             # 普通键值对放在了  request.POST   中
    6.             # POST::>> 
    7.             print('FILES::>>', request.FILES)
    8.             # 文件数据放在了  request.FILES   中
    9.             # FILES::>> ]}>
    10.  
    11.     return render(request, 'ab_file.html')

    发送文件数据的格式

    1. // 点击按钮向后端发送普通键值对数据和文件数据
    2. $("#btn").on('click', function () {
    3. // （1）先生成一个内置对象
    4. let formDataObj = new FormData();
    5.  
    6. // （2）支持添加普通的键值对
    7. formDataObj.append('username', $("#d1").val());
    8. formDataObj.append('password', $("#d2").val());
    9.  
    10. // （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
    11. formDataObj.append('myfile', $("#d3")[0].files[0]);
    12.  
    13. // （4）基于Ajax，将文件对象发送给后端
    14. $.ajax({
    15. url: '',
    16. type: 'post',
    17. // 直接将对象放到data里面即可
    18. data: formDataObj,
    19.  
    20. // Ajax发送文件必须添加的两个参数
    21. // 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
    22. contentType: false,
    23. // 告诉浏览器不要对我的数据进行任何处理
    24. processData: false,
    25.  
    26. success: function (args) {
    27.  
    28. }
    29. })

    2.结论

    Ajax发送文件数据需要利用内置对象FormData

    1. // （1）先生成一个内置对象
    2. let formDataObj = new FormData();
    3.  
    4. // （2）支持添加普通的键值对
    5. formDataObj.append('username', $("#d1").val());
    6. formDataObj.append('password', $("#d2").val());
    7.  
    8. // （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
    9. formDataObj.append('myfile', $("#d3")[0].files[0]);

    需要指定两个关键性的参数

    1. // Ajax发送文件必须添加的两个参数
    2. // 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
    3. contentType: false,
    4. // 告诉浏览器不要对我的数据进行任何处理
    5. processData: false,

    • Django后端能直接自动识别到FormData对象

      • 将内部的普通键值对自动解析并封装到request.POST中
      • 将内部的文件数据自动解析并封装到request.FILES中
    1. print('POST::>>', request.POST)
    2. # 普通键值对放在了  request.POST   中
    3. # POST::>> 
    4.  
    5. print('FILES::>>', request.FILES)
    6. # 文件数据放在了  request.FILES   中
    7. # FILES::>> ]}>

    四.分页

    1.前言

    当我们需要使用到非Django内置的第三方模块或者功能组件代码的时候，我们一般情况下会创建一个名为utils的文件夹，在该文件夹中对模块的功能进行划分

    注意：样式基于bootstrap，需要引入bootstrap配置

    2.自定义分页器封装代码

    1. class Pagination(object):
    2.     def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):
    3.         """
    4.         封装分页相关数据
    5.         :param current_page: 当前页
    6.         :param all_count:    数据库中的数据总条数
    7.         :param per_page_num: 每页显示的数据条数
    8.         :param pager_count:  最多显示的页码个数
    9.         """
    10.         try:
    11.             current_page = int(current_page)
    12.         except Exception as e:
    13.             current_page = 1
    14.  
    15.         if current_page < 1:
    16.             current_page = 1
    17.  
    18.         self.current_page = current_page
    19.  
    20.         self.all_count = all_count
    21.         self.per_page_num = per_page_num
    22.  
    23.         # 总页码
    24.         all_pager, tmp = divmod(all_count, per_page_num)
    25.         if tmp:
    26.             all_pager += 1
    27.         self.all_pager = all_pager
    28.  
    29.         self.pager_count = pager_count
    30.         self.pager_count_half = int((pager_count - 1) / 2)
    31.  
    32.     @property
    33.     def start(self):
    34.         return (self.current_page - 1) * self.per_page_num
    35.  
    36.     @property
    37.     def end(self):
    38.         return self.current_page * self.per_page_num
    39.  
    40.     def page_html(self):
    41.         # 如果总页码 < 11个：
    42.         if self.all_pager <= self.pager_count:
    43.             pager_start = 1
    44.             pager_end = self.all_pager + 1
    45.         # 总页码  > 11
    46.         else:
    47.             # 当前页如果<=页面上最多显示11/2个页码
    48.             if self.current_page <= self.pager_count_half:
    49.                 pager_start = 1
    50.                 pager_end = self.pager_count + 1
    51.  
    52.             # 当前页大于5
    53.             else:
    54.                 # 页码翻到最后
    55.                 if (self.current_page + self.pager_count_half) > self.all_pager:
    56.                     pager_end = self.all_pager + 1
    57.                     pager_start = self.all_pager - self.pager_count + 1
    58.                 else:
    59.                     pager_start = self.current_page - self.pager_count_half
    60.                     pager_end = self.current_page + self.pager_count_half + 1
    61.  
    62.         page_html_list = []
    63.         # 添加前面的nav和ul标签
    64.         page_html_list.append('''
    65.                     
    66.                     
      •                 ''')
      •         first_page = '
      • 首页
        • ' % (1)
    67. page_html_list.append(first_page)
    69. if self.current_page <= 1:
    70. prev_page = '
    71. 上一页
      72. '
  • else:
  • prev_page = '
  • 上一页
    • ' % (self.current_page - 1,)
  • page_html_list.append(prev_page)
  • for i in range(pager_start, pager_end):
  • if i == self.current_page:
  • temp = '
  • %s
    • ' % (i, i,)
  • else:
  • temp = '
  • %s
    • ' % (i, i,)
  • page_html_list.append(temp)
  • if self.current_page >= self.all_pager:
  • next_page = '
  • 下一页
    • '
  • else:
  • next_page = '
  • 下一页
    • ' % (self.current_page + 1,)
  • page_html_list.append(next_page)
  • last_page = '
  • 尾页
    • ' % (self.all_pager,)
  • page_html_list.append(last_page)
  • # 尾部添加标签
  • page_html_list.append('''
  • ''')
  • return ''.join(page_html_list)

    • 3.后端使用方法

    1.  def get_book(request):
    2.    book_list = models.Book.objects.all()
    3.    current_page = request.GET.get("page",1)
    4.    all_count = book_list.count()
    5.    page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10)
    6.    page_queryset = book_list[page_obj.start:page_obj.end]
    7.    return render(request,'booklist.html',locals())

    4.前端使用方法

    1. class="container">
    2.     
      class="row">
    3.         
      class="col-md-8 col-md-offset-2">
    4.             {% for book in page_queryset %}
    5.             
      {{ book.title }}
    6.             {% endfor %}
    7.             {{ page_obj.page_html|safe }}
    8.         
    9.

  • 相关阅读:
    __declspec(dllimport)
    常见设置模式（抽象工厂&责任链模式&观察者模式）
    The connection to adb is down, and a severe error has occured.问题解决
    多主复制的适用场景(1)-多IDC
    【RocketMQ】深入剖析延迟消息核心实现原理
    JZ22 链表中倒数最后k个结点
    I/O模型和BIO
    HTTP的请求方式有哪些？
    Opencv实现目标检测
    从零开始配置 vim(16)——启动界面配置
  • 原文地址：https://blog.csdn.net/qq_65852978/article/details/134531817