Django框架08

Ajax简介

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法，本质就是一些js代码，使用ajax的前提必须要引入jQuery文件。

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

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

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

Ajax的优缺点

Ajax使用JavaScript技术向服务器发送异步请求；
Ajax请求无需刷新整个页面；
Ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作；

Ajax的基本语法结构

$.ajax({
    url:'',#指定朝哪个后端地址发送请求 不写默认曹当前地址提交
    type:'post' #指定提交方式
    
    data:{'username':'jason','password':'123'}
    success:function(data){
        #data指代的就是后端返回的异步提交的结果
        #异步回调机制逻辑处理代码
    }
})

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

django针对不同编码方式对应的数据格式会采用不同的处理策略。

'''
form表单默认发送的编码格式>>>:
               Content-Type: application/x-www-form-urlencoded
数据格式>>>:
               username=jason&password=123
django后端会自动处理到:request.POST
form表单发送文件
    Content-Type: multipart/form-data
  数据格式:隐藏不让看
  django后端会自动处理:request.POST  request.FILES
'''

'''
ajax默认的编码格式>>>:
           Content-Type: application/x-www-form-urlencoded
数据格式>>>:
               username=jason&password=123
django后端会自动处理到:request.POST
'''

Ajax发送json格式数据

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

ajax发送的数据类型一定要跟数据的编码格式一致。

ajax  默认的数据编码格式是urlencoded
        也就意味着ajax发送post请求django后端默认是通过request.POST获取数据
        
    ajax发送json格式数据
        如何查看前端提交数据的编码格式？
            在请求头中有一个content-Type参数
        """
        前后端交互数据的时候 一定要做到数据个编码格式的一致性
        """
        1.需要手动指定编码格式
            contentType:'application/json'
        2.一定要确保数据也是符合json格式的
            data:JSON.stringify({'username':'jason'})
        
        # django后端针对json格式的数据 是不会做任何处理的  会原封不动的放在request.body中
        你可以手动去处理获取数据
            
            1.将bytes类型转成json格式字符串
            2.利用json模块json.loads反序列化出来

$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        })
    })

Ajax发送文件数据

Ajax传文件，需要使用到js内置对象 FormData ；该对象及可以携带普通的键值对，给django后端的request.POST，也可以携带文件给django后端的request.FILES。

$("#d1").click(function () {
        // 需要利用内置js内置对象FormData
        let myFormData = new FormData();
        // 对象添加普通数据
        myFormData.append('username',$('#name').val())
        myFormData.append('password',$('#pwd').val())
        // 对象添加文件数据
        myFormData.append('my_file',$('#file')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,
            // 携带文件必须要指定的两个参数
            contentType:false,
            processData:false,
            success:function (args) {
                // 处理异步回调返回的结果
            }
        })
    })