Ajax

Ajax

一、ajax简介

　　AJAX，Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　ajax不是新的编程语言，而是一种使用现有标准的新方法，是基于js写的一个功能模块。

　　ajax是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。

 

1、ajax的特点

　　① 异步提交

　　　　同步：任务提交之后原地等待任务的返回结果，进程表现上来说是阻塞状态

　　　　异步：任务提交之后不需要原地等待返回结果，直接执行下一行代码，进行表现上来说是非阻塞状态，结果通过异步回调机制callback()返回

　　② 局部刷新

 

2、与后端进行交互的方式

　　① 浏览器窗口输入url回车　　GET请求

　　② a标签href属性填写url　　   GET请求

　　③ form表单　　　　　　　　GET/POS请求

　　④ Ajax　　　　　　　　　　 GET/POST请求

　　由于原生js书写ajax较为繁琐，所以直接学jQuery封装好的ajax模块操作会相对简便些

 

3、ajax语法

// ajax语法
$.ajax({
    url: '',  // 控制数据提交路径
    type: 'get/post',  // 数据提交方式
    data: {'username': 'tom'},  // 提交的数据
    success: function (data形参) {  // 一旦异步提交有结果，自动触发运行该函数，形参data就是用来接收结果的
        // 代码
    }
})

　　看一个示例：写一个页面上的加法计算器功能（页面有三个input框和一个按钮，点击按钮在保证页面不刷新的情况下将数据发到后端做计算，并将计算好的数据再发给前端展示到第三个input框中）

前端calculator.html代码：

<h2>网页加法计算器功能</h2>
<input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3">
<button id="d1">计算</button>
<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操作
                $('#i3').val(data)
            }
        })
    })
</script>

后端views.py代码：

def calculator(request):
    if request.method == 'POST':
        # print(request.POST)
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
    return render(request, 'calculator.html')

 

 

二、content-type前后端传输数据的三种编码格式

　　urlencoded

　　　　数据格式 username=xxx&password=yyy，是form表单和ajax默认的编码格式，django后端针对符合该格式的数据都会自动解析并放到request.POST中

　　formdata

　　　　既可以发送文件也可以发送键值对，django后端针对符合该格式的数据都会自动解析并放到request.POST中，文件数据放到request.FILES

　　application/json

　　　　传输数据与编码格式要保持一致，django后端针对json格式的数据并不会做处理，数据会以二进制的形式存放在request.body中，需要自己手动后端处理：json.loads可以直接反序列化符合json格式的二进制数据

 

1、form表单提交数据

1）urlencoded编码格式

　　form表单默认是以urlencoded编码格式传输数据，urlencoded数据格式为：username=xxx&password=yyy

　　django后端针对该格式的数据会自动解析打包到request.POST中，后端可以通过request.POST.get()方法获取前端数据

2）formdata编码格式

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

 

2、ajax提交数据

1）urlencoded编码格式

　　ajax默认也是以urlencoded编码格式传输数据。前后端数据交互的时候，编码格式与数据格式一定要一致

2）applocation/json编码格式

　　ajax也可以发送applocation/json格式数据，django后端针对json格式数据，并不会做任何的处理，而是直接放在request.body中。所以取出数据之后需要后端自己处理json格式数据

$.ajax({
    url:'',
    type: 'post',
    contentType: 'application/json',  // ajax修改数据提交方式为applocation/json
    data: JSON.stringify({'user': 'tom', 'pwd': 123}),  // 将数据序列化为json格式
    success:function (data) {
        alert(data)
    }
})

3）不使用任何编码格式，使用内置对象FormData（自带编码格式）

// ajax发送文件数据，需要借助与内置对象
$('#d3').click(function () {
    // 1 需要先生成一个内置对象
    var myFormData = new FormData();
    // 2 传普通键值对，当键值对较多的时候，可以使用for循环来添加
    myFormData.append('name': 'tom')
    myFormData.append('pwd': 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)
        }
    })
})