11、AJAX

一、AJAX

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

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

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

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

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

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

1、AJAX常见应用场景

我们先用一个常见的场景来更加清晰的理解AJXA的作用，咱们平常都有注册过账号吧，在注册时给账户起名时，是否遇到过这种情况。名字被人注册了，弹出该用户名已存在的提示

这就是AJXA最常用的场景，整个过程页面并没有刷新，只是局部刷新了；在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

2、jQuery实现AJXA

做一个简单的数字相加的页面，用户在两个文本框输入不同的数字，点击计算按钮，在不刷新页面的情况下，计算出结果

首先把HTML页面做好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<label>
    <input type="text" id="d1"> +
    <input type="text" id="d2"> =
    <input type="text" id="d3">
</label>
    <p><button id="btn">计算</button></p>

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 朝后端发送AJAX请求
        $.ajax({
            // 1、指定朝哪个后端发送AJAX请求
            url:'',  // 不写就是朝当前地址提交
            // 2、请求方式
            type:'post',
            // 3、数据(拿到第一个输入框内容和第二个输入框内容，然后朝后端发送)
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            // 4、回调函数（异步回调机制）:后端返回结果时会自动触发，args即接受后端的返回结果
            success:function (args){
                $('#d3').val(args)  // 通过DOM操作将内容 渲染到标签内容上
            }
        })
    })
</script>

</body>
</html>

视图层views.py

# ajax
def ab_ajax(request):
    if request.method == 'POST':

        i1 = request.POST.get('i1')  # 后端接收前端发送的内容
        i2 = request.POST.get('i2')
        i3 = int(i1) + int(i2)  # 然后做相加的计算
        return HttpResponse(i3)
    return render(request, 'ab_ajax.html')

二、AJAX发送json格式数据

前后端在传输数据的时候，一定要表明你所发的的数据到底是什么格式。
前后端交互，必须确保数据是什么格式，编码就得是什么格式！

那么怎么告诉后端你要发送的数据的格式是什么呢
form 表单是通过他的 enctype
而 ajax 是通过 contentType，如果你要传送的数据是json（通常只有json格式）
你需要这么写 contentType：'application/json'
要怎样发送一个json格式的数据呢？后端有json.dumps 前端有JSON.stringify()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
</head>
<body>
    <button class="btn btn-danger" id="d1">点我</button>

    <script>
        $('#d1').click(function(){
            $.ajax({
                url:'',
                type:'post',
                data:JSON.stringify({'username':'poco','age':22}),  // 给的数据必须也是json格式
                contentType:'application/json',  // 指定编码格式为json
                success:function () {
                }
            })
        })
    </script>
</body>
</html>

后端代码

import json


def ab_json(request):
    if request.is_ajax():  # 判断是否是ajax请求
        json_bytes = request.body
        json_dict = json.loads(json_bytes)
        print(json_dict, type(json_dict))
    return render(request, 'ab_json.html')

三、AJAX发送文件数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>


</head>
<body>
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>

<script>
    $('#b1').click(function () {
        // 1.先生成一个formdata对象
        var myFormData = new FormData();
        // 2.朝对象中添加普通的键值
        myFormData.append('username',$("#t1").val());
        myFormData.append('password',$("#t2").val());
        // 3.朝对象中添加文件数据
        // 1.先通过jquery查找到该标签
        // 2.将jquery对象转换成原生的js对象
        // 3.利用原生js对象的方法 直接获取文件内容
        myFormData.append('myfile',$('#t3')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接把对象放在data后面
            // ajax发送文件必须指定的两个参数
            contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
            processData:false,  // 告诉浏览器不要对数据进行任何处理
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

</body>

</html>

后端

def ab_file(request):
    if request.is_ajax():  # 判断是否是ajax请求
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request, 'ab_file.html')

posted @ 2021-06-10 13:15 黑影Poco 阅读(96) 评论(0) 收藏举报

刷新页面返回顶部

黑影Poco

One Piece