56.Ajax操作

【一】Ajax

1）简介

• Ajax：异步的Javascript和XML，即JavaScript语言与服务器进行异步交互，传输的数据为XML

• 可用与服务器交换数据并更新部分网页内容

• 同步交互：

  • 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求

• 异步同步：

  • 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

2）精髓

• 异步提交/局部刷新
  • 动态获取用户名，实时跟后台确认并将结果展示给前端

【二】Ajax使用

1）普通

# 引入js与boot使用Ajax
<script src="{% static 'js/jquery.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'plugins/Bootstrap3/css/bootstrap.min.css' %}">
<script src="{% static 'plugins/Bootstrap3/js/bootstrap.min.js' %}"></script>

# 前端
<h1>Ajax实现前后端交互 —— 计算</h1>
<div>数字一 <input type="text" id="num_1"></div>
<div>数字二 <input type="text" id="num_2"></div>
<div>结果 <input type="text" id="result"></div>
<div>
    <button id="btn_add">点击计算</button>
</div>

<script>
    {#页面加载完毕时触发#}
    $(document).ready(
        {#绑定按键,点击触发#}
        $('#btn_add').click(function () {
            var num_one = $('#num_1').val()
            var num_two = $('#num_2').val()
            {#启用Ajax#}
            $.ajax({
                // 提交的目标地址
                url: "",
                // 请求方式(post,get)
                type: "post",
                // 请求体数据
                data: {'num_1': num_one, 'num_2': num_two},
                // 响应函数
                success: function (res) {
                    $('#result').val(res)
                }
            })
        })
    )
</script>

# 后端（直接返回字符串）
class Ajax_1(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'Ajax_1.html', locals())

    def post(self, request, *args, **kwargs):
        data = request.POST
        print('data:',data)
        # data: < QueryDict: {'num_1': ['1'], 'num_2': ['4']} >
        num_1 = request.POST.get('num_1')
        num_2 = request.POST.get('num_2')
        result = int(num_1) + int(num_2)
        print(result)
        # 3
        return HttpResponse(result)

2）升级

# 前端
<h1>Ajax实现前后端交互 —— 进阶：json模块</h1>
<div>数字一 <input type="text" id="num_1"></div>
<div>数字二 <input type="text" id="num_2"></div>
<div>结果 <input type="text" id="result"></div>
<div>
    <button id="btn_add">点击计算</button>
</div>

<script>
    $(document).ready(
        $('#btn_add').click(function () {
            let numberOne = $('#num_1').val()
            let numberTwo = $('#num_2').val()
            $.ajax({
                url: '',
                type: 'post',
                data: {'num_1': numberOne, 'num_2': numberTwo},
                success:function (res) {
                    console.log(res, typeof res)
                    alert(res.message)
                    $('#result').val(res.result)
                }
            })
        })
    )
</script>

#后端（返回字典）
class Ajax_2(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'Ajax_2.html', locals())

    def post(self, request, *args, **kwargs):
        data = request.POST
        print('data:', data)
        # data: < QueryDict: {'num_1': ['1'], 'num_2': ['2']} >
        num_1 = request.POST.get('num_1')
        num_2 = request.POST.get('num_2')
        result = int(num_1) + int(num_2)
        data = {'result': result, 'message': '计算成功'}
        print(data)
        # {'result': 3, 'message': '计算成功'}
        return JsonResponse(data)

3）进阶

1.form表单传递数据的格式

# json格式
<form action="" method="post" enctype="text/plain"></form>
# 只能传递键值数据，无法传递文件数据
<form action="" method="post" enctype="application/x-www-form-urlencoded"></form>
# 可传输键值对数据，文件数据作为单独的处理对象
<form action="" method="post" enctype="multipart/form-data"></form>

2.修改编码格式

$.ajax({
	...
	// 修改当前请求数据的编码格式
    contentType: "application/json",
	...
})

3.Ajax携带文件数据

# 前端
<h1>Ajax实现前后端交互 —— 进阶：携带文件数据</h1>
<div>text：<input type="text" id="text"></div>
<div>文件传输：<input type="file" id="file"></div>
<div>
    <button id="btn">提交数据</button>
</div>

<script>
    $(document).ready(
        $('#btn').click(function () {
            // 创建一个formData对象
            var formData = new FormData()
            // 获取键值对数据，并将数据添加到formDate对象中
            let text = $('#text').val()
            let file_obj = $('#file')[0].files[0]
            formData.append('text', text)
            formData.append('file_obj', file_obj)
            $.ajax({
                // 提交的目标地址
                url: "",
                // 请求方式
                type: "POST",
                //【3】请求体数据
                data: formData,
                // 【3.1】传递文件数据的时候
                // 需要修改当前请求数据的编码格式
                // 不需要使用任何的编码格式 原因是 formData 对象会自动帮我们编码
                contentType: false,
                // 修改当前是请求的限制类型
                // 告诉浏览器你不要对我的数据进行任何处理操作
                processData: false,
                // 响应函数
                success: function (res) {
                    alert(res.message)
                }
            })
        })
    )
</script>

# 后端
class Ajax_3(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'Ajax_3.html', locals())

    def post(self, request, *args, **kwargs):
        text = request.POST.get('text')
        file_obj = request.FILES.get('file_obj')
        print(file_obj, type(file_obj))
        # 0528db72-2b1a-4af7-87d8-9d0bb613a239.png
        # <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>

        # 文件的二进制
        img_obj = file_obj.read()
        data = {"code": 200, 'message': '上传成功'}
        return JsonResponse(data)

【三】request方法判断ajax

request.is_ajax()

• 返回当前请求是否是ajax请求，返回布尔值

print(request.is_ajax())

# 正常浏览器网址回车提交的是 GET 请求 - 结果是False
# 当我们发送ajax请求后 - 结果是True

【三】二次弹窗插件

1）layer

# https://www.bootcdn.cn/
# https://www.bootcdn.cn/layer/
# https://layui.dev/2.7/layer/

2）layui

# https://layui.dev/docs/2/layer/

3）sweetalert

# https://www.bootcdn.cn/sweetalert/
# https://sweetalert.js.org/