Ajax

ajaxtony

2020-01-10

关注关注

Ajax准备知识

Ajax

Ajax介绍

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

Ajax并不是一门新的语言它其实就是基于JS写的一个功能模块而已。

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

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

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

AJAX
    1、AJAX是什么
        前端向后端发送请求的方式

    2、前端向后端发送请求的方式
        1、直接在浏览器地址栏输入URL访问    -->GET
        2、点击a标签跳转到指定页面         -->GET
        3、form表单                      -->GET/POST
        4、AJAX                          -->GET/POST

AJAX的两个关键点：局部刷新，异步请求

JQuery实现Ajax

案例：

页面上有三个input框一个按钮
用户在前两个框中输入数字点击按钮保证页面不刷新的情况下将数据发到后端做计算，然后将计算好的结果再发给前端展示到第三个input框中

Ajax

<script>
    $(‘#d1‘).click(function () {
        //获取两个框里面的内容，朝后端提交异步请求
        //ajax基本语法
        $.ajax({
            // 1.指定朝哪个后端提交数据
            url:‘‘,//控制数据的提交路径 有三种写法 跟form表单的action属性一致
            // 2.指定当前请求方式
            type:‘post‘,
            // 3.指定提交的数据
            data:{‘i1‘:$(‘#i1‘).val(),‘i2‘:$(‘#i2‘).val()},
            // 4.ajax是异步提交，所以需要给一个回调函数来处理返回结果
            success:function (data) { // data就是异步提交的返回结果
                //将异步提交的结果通过DOM操作渲染到第三个input框里
                {$(‘#i3‘).val(data)}
            }
        })

注意，Ajax提交数据需要把中间件注释掉

Ajax

def index(request):
    if request.method ==‘POST‘:
        i1 = request.POST.get(‘i1‘)
        i2 = request.POST.get(‘i2‘)
        # i1,i2是字符串类型，需要先做类型转换
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
    return render(request,‘index.html‘)

Views.py

页面展示：

Ajax

content-type 编码格式

form表单

Ajax

点开浏览器检查Network 发现form表单传输的数据默认是urlencoded

urlencoded数据格式：

username=jason&password=123

Ajax

django后端针对该格式的数据会自动解析并帮你打包到request.POST中

如果提交的是文件

Ajax

后端获取的只是文件名

Ajax

formdata数据格式

Ajax

后端获取的是文件对象

Ajax

django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中
而针对formdata文件数据就会自动解析放到request.FILES中

Ajax

Ajax默认的也是urlencoded编码格式

但Ajax还可以发json格式的数据

注意：前后端数据交互编码格式与数据格式一定要一致，不能骗人家！！！

//发json格式
    $(‘#d2‘).on(‘click‘,function () {
    $.ajax({
        url:‘‘,
        type:‘post‘,
        // 修改content-Type参数
        contentType:‘application/json‘, //把默认的urlencoded编码格式改成json数据的格式
        data:JSON.stringify({‘username‘:‘jason‘,‘password‘:123}),  // 将数据序列化成json格式字符串
        success:function (data) {
            alert(data)
        }
    })

Ajax 由浏览器检查可知，此时发的就是json数据了

django后端针对json格式数据并不会做任何的处理，而是直接放在request.body中，需要自己处理二进制的json格式

Ajax

import json 

    #自己处理json格式数据
    json_bytes = request.body
    #先解码
    # json_str = json_bytes.decode(‘utf-8‘)
    #再反序列化
    # json_dict = json.loads(json_str)
    
    #扩展 json.loads能够自动解码并序列化
    json_dict = json.loads(json_bytes)
    print(json_dict,type(json_dict))

Ajax发送文件：

Ajax有一个内置对象FormData，既发可以普通键值对也可以发文件

// ajax发送文件数据  需要借助于内置对象
    $(‘#d3‘).click(function () {
        // 1 需要先生成一个内置对象
        var myFormData = new FormData();
        // 2 传普通键值对  当普通键值对较多的时候 我们可以利用for循环来添加
        myFormData.append(‘username‘,‘jason‘);
        myFormData.append(‘password‘,123);
        // 3 传文件
        myFormData.append(‘myfile‘,$(‘#i1‘)[0].files[0]);  // 获取input框内部用户上传的文件对象
        // 发送ajax请求
        $.ajax({
            url:‘‘,
            type:‘post‘,
            data:myFormData,
            // 发送formdata对象需要指定两个关键性的参数

            processData:false,  // 让浏览器不要对你的数据进行任何的操作
            contentType:false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
            success:function (data) {
                alert(data)
            }
        })
    })

由下图可知，此时就可以拿到文件对象和普通键值对了

Ajax