Django-10：django前后端交互

Django - Ajax

一、回顾往期知识点

本章节需要使用到往期文章中前端的知识点，所以本小结用来回顾一些比较关键的。

1.1、绑定事件

原生JS两种绑定事件的方式：

• <!--HTML-->
  <button onclick="func1()">点我</button>
  
  <script>
      function func1() {
         
         
          alert(111)
      }
  </script>
  

• <!--HTML-->
  <button id="d1">点我</button>
  
  <script>
      let btnEle = document.getElementById('d1');
      btnEle.onclick = function () {
         
         
          alert(222)
      }
  </script>
  

前面了解过了jQuery，所以后续代码都以jQuery为准。

• jQuery绑定事件

  <script>
  	// 第一种
      $('#d1').click(function () {
         
         
              alert('111')
      });
    
  	// 第二种(功能更加强大,支持事件委托)
      $('#d2').on('click',function () {
         
         
              alert('111')
      })
  </script>
  

1.1 获取标签内的数据

/*通过不同选择器，获取表单内当前的数据*/
$('#d1').val()  
$('input').val() 
$('.c1').val()  


/*将数据发送给标签（设置表单内数据）*/
$('#d1').val('520')

1.2 获取发送的文件数据

let fileEle = document.getElementById('ipt1')
fileEle.value
'''
	.value  无法获取到文件数据,只能获取到文件路径。
'''

可以利用files方法，来获取到提交的文件数据。

let fileEle = document.getElementById('ipt1')
fileEle.files[0]

'''
File {name: '测试.png', lastModified: 1638241647821, lastModifiedDate: Tue Nov 30 2021 11:07:27 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 144161, …}
'''

注意：

• files是DOM对象的方法，如果是使用的jQuery语法，获取的jQuery对象，是无法使用该方法的，需要先进行转换。

  jQuery对象 – > DOM对象：

  $('#input')[0]
  
  '''
  加上索引0即可
  '''
  

二、Ajax

Ajax简介：

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

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

优点：

• AJAX使用JavaScript技术向服务器发送异步请求；
• AJAX请求无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
• 两个关键点:1.局部刷新，2.异步请求

常见应用场景：

一、基本语法：(使用jQuery为主)

• $.ajax({
       
       })
  

  所需参数：

  $.ajax({
       
       
      url:''   #指定朝哪个后端发送ajax请求,不写就是朝当前地址提交
      type:'post'   #不指定默认就是get,都是小写
      data:{
       
       }   #发给后端的数据
      success:function(形参接收后端返回的结果){
       
       处理代码}  #回调函数
  })
  

二、小案例

页面上有三个input框：

• 在前两个框中输入数字，点击按钮后，朝后端发送ajax请求
• 后端计算出结果，再返回给前端，动态展示的到第三个input框中，整个过程页面不准有刷新，也不能在前端计算。

HTML代码如下：

<input type="text" id="num1"> +
<input type="text" id="num2"> =
<input type="text" id="num3">
<p>
    <button id="btn">计算</button>
</p>

2.1 JS代码与python代码的推导

第一步：

• JS

  $('#btn').on('click',function () {
       
       
      $.ajax({
       
       
          url:'',
          type:'post',
          data:{
       
       'num1':$('#num1').val(),'num2':$('#num2').val()},
          success:function (args) {
       
       
  
          }
      })
  })
  

• Python

  def ajax_test(request):
      if request.method == 'POST':
          print(request.POST)
          #输出结果 <QueryDict: {'num1': ['xxx'], 'num2': ['xxx']}>
      return render(request,'ajax_test.html')
  

代码分析：

• JS：先给计算按钮添加绑定事件，当点击触发之后，执行函数体内的代码。

  代码内发送Ajax请求，类型为POST，发送的数据为num1表单内的数据，与num表单内的数据，随后将这些获取到的数据组成字典返回给后端（在js中，这种数据类型叫对象，而在python中叫做字典）

• Python：打印request.POST，查看是否可以正常的获取到Ajax发来的数据，答案是可以的。

第二步：

• 后端Python代码中，可以获取到数据后，就可以着手书写计算上传数值的合了。

  # Python
  def ajax_test(request):
      if request.method == 'POST':
          print(request.POST)
          # <QueryDict: {'num1': ['3'], 'num2': ['4']}>
          num1 = request.POST.get('num1')
          num2 = request.POST.get('num2')
          res = int(num1)+int(num2)
          return HttpResponse(res)
      
      return render(request,'ajax_test.html')
  

  这里需要注意，返回计算后的结果时，不可以直接return返回，而是要使用HttpResponse。

第三步：

• 将后端计算好的结果，渲染到页面上

  $('#btn').on('click',function () {
       
       
      $.ajax({
       
       
          url:'',
          type:'post',
          data:{
       
       'num1':$('#num1').val(),'num2':$('#num2').val()},
          /*回调函数*/
          success:function (args) {
       
       
              $('#num3').val(args)
          }
      })
  })
  

  后端返回的函数，会被回调函数的形参所接收，所以后续只需要让表单内的值，与返回的计算结果相等即可。

补充：

• 判断当前请求是否是ajax请求

  request.is_ajax()
  
  '''
  返回值为布尔类型
  '''
  

三、前后端交互的编码格式

本章节主要研究，前后端在传输数据的编码格式（contentType）

由于GET请求数据就是直接放在url后面的，如：url?name=liuyu&pwd=123，是可以直接看到的，所以本章节主要研究POST请求数据的编码格式。

可以朝后端发送post请求的方式：

• form表单
• ajax请求

前后端传输数据的编码格式：

• urlencoded
• formdata
• json

下面将针对form表单以及ajax请求，在使用不同编码格式时如何交互。

3.1 研究form表单

3.1.1 urlencoded编码格式

urlencoded默认的编码格式。

• 全称：Content-Type: application/x-www-form-urlencoded

  

结论：

• Django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中

  username=liuyu&password=123  >>>  request.POST
  

3.2.2 formdata编码格式

formdata编码的应用场景：

• 上传文件

  """
  当需要上传文件时，就需要form表单必须满足两个条件：
  	1.method必须指定成post
  	2.enctype必须换成formdata，否则只能接收到文件名。
  		其中，这个enctype就是设置编码为formdata格式。
  """
  <form action="" method="post" enctype="multipart/form-data">