Ajax

异步提交局部刷新

全称：AJAX（Asynchronous Javascript And XML）

中文名为：异步javascript和XML

通过JavaScript来操作发送请求到服务端

XML：数据交互使用XML，现在主流使用JSON格式

局部刷新：JS的DOM操作

原生JS可以写Ajax请求的，但是写起来很复杂，而且需要考虑浏览器的版本（不推荐使用）
JQuery已经封装了1个ajax方法，直接调用JQuery，就可以发送Ajax请求
前后端分离的项目，依旧可以使用JQuery的ajax，但是axios更加主流一些

ajax可以发送 get请求/post请求

我们现在学习的是 jQuery 封装之后的版本
我们在使用Ajax的时候需要导入jQuery


代码案例展示:
       1.需要先给标签绑定事件
       2.
      

$('#ID').click(function(){
  #给标签绑定单击事件
  
  $.ajax({    
  #设置ajax参数
         url:'',
         #提交地址，不行就是朝当前地址提交
         type:'post',
         #请求方式 不行默认是get
         # data:{'name':'moon','password':'123'}
         # 固定值传送的数据
         date:{'name':$('#id').val()}
         # 动态传送数据给后端，传送的是获取到标签上的值
         success:function(args){
           #args=后端的返回值
           alert(args)
           #当后端有返回值的时候是自动触发这里面的代码
         }
         # 异步回调函数
                 })
  
})



后端：

def 视图函数名(request):
   if request.method == 'POST':
       date = request.POST 
       #date = <QueryDict:{'name':['111'],'password':['222']}
       name = request.POST.get('name')
			 #通过账号查询表中是否已经存在这个账号
       # 如果账号已存在可以返回 账号已存在 字符串
       return HttpResponse('该账号已存在')

前后端传输数据格式(contentType)

post请求数据的编码格式

'''
前后端传输数据的编码格式
1.urlencoded
2.formdata
3.json
'''


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

1.form表单 默认数据编码格式是urlencoded 数据格式name=aaa&password=bbb
           django后端会自动解析处理到request.POST中
  
form表单

<form action='' method='post'>
      username:<input type='text' name='username'>
      password:<input type='password' name='password'>
      file:<input type='file' name='file'>
    
      <input type='submit'>
      
django后端针对符号urlencoded格式的数据 都会全部放入request.POST中
默认都是这种格式

如果你把编码格式改为formdate 那么普通的键值对还是解析到request.POST中
而文件会自动解析到 request.FILES中
所以如果需要接受文件需要改变form编码格式

form表单是无法发送json格式数据的



2.ajax请求
  
  <input type='button' value='按钮' id='a01'>
  
  <script> 
  $('#a01').click(function(){
    $.ajax({
      url:'',
      type:'post',
      data:{'username':'moon','age':20},
      success:function(args){
        
      }
      
    })
  })
  
  </script>

ajax默认的编码格式 也是 urlencoded

ajax支持jaon格式传输

Ajax发送json格式数据

ajax设置编码格式
关键字：contentType

'''
前后端传输数据的时候一定要保证编码格式与真正数据的格式是一直的
必须保持一直
'''

 $('#a01').click(function(){
    $.ajax({
      url:'',
      type:'post',
      data:JSON.stringify({'username':'moon','age':20}),
      # 传送一个json格式的数据
      contentType:'application/json',
      # 将编码格式设置为json格式
      success:function(args){
        
      }          })  })

  
如何判断前端发送的请求是否是ajax请求
request.is_ajax() 返回布尔值 
  
  
 针对json格式的post请求，数据是在 request.boby
	后端需要从request.body中获取并自己处理

Ajax携带文件数据


<script>
    $('#d3').click(function () {
        # 1.先产生一个FormData内置对象
        let myFormDataObj = new FormData();
        // 2.往该对象中添加普通数据
        myFormDataObj.append('name', $('#a1').val());
        myFormDataObj.append('age', 18);
        // 3.往该对象中添加文件数据
        myFormDataObj.append('file', $('#d2')[0].files[0])
        # 获取文件标签的文件内容 $('#d2')[0].files[0]
        // 4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormDataObj,
            # 发送你的myFormDataObj对象

            // ajax发送文件固定的两个配置
            contentType:false,
            processData:false,
            success:function (args){
                alert(args)
            }

        })
    })
</script>



 def ajax(request):
    if request.is_ajax():
      request.POST # {'name':'123'}
			request.FILES # 拿到文件对象

Ajax前后端数据发送

 1. 后端返回的数据都会被args接受 不会再影响整个页面
    只会作用于ajax内
 
  $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{'name':'moon'},
            success:function (args) {
              # 后端三板斧返回的数据都会被args接受
              # 不影响整个页面
                console.log(args) 
            }
        })
    })
  
  
2.选择ajax做前后端交互时，后端一般返回的都是字典数据

user_dict = {'code':10000,'username':'月神','hobby':'moon'}

             # 前端可以通过判断 code数值来进行不同的判断 
        方式一：import json 
               user_dict = json.dumps(user_dict)
               后端返回return HttpResponse('user_dict')形式
               前端需要 let userObj = JSON.parse(args)
               前端接手时需要进行json转换 才可以通过userObj.username拿到数据
            
        
        方式二:from django.http import JsonResponse
              后端返回return JsonResponse(user_dict)
              # 直接通过JsonResponse返回字典
              前端直接就可以 args.username 取值
              
        方式三: $.ajax({
                  url:'',
                  type:'post',
                  data:{'name':'moon'},
                  dataType:'json',
                  #在前端ajax内加入数据类型dataType:'json'
                  #这样后端直接返回json格式类型就可以了
                  后端返回return HttpResponse('user_dict')形式
                  后端返回return JsonResponse(user_dict)
                  这样都可以前端直接会转换为自定义对象