526互联

【10.0】Ajax之引入

发布时间 2023-07-17 11:35:08作者: Chimengmeng

【一】Ajax简介

【1】精髓

精髓：异步提交/局部刷新

  • 动态获取用户名，实时跟后端确认并将结果展示给前端

【2】发送请求的方式

  • 向后端发送请求的方式
    • 浏览器地址直接url回车
      • GET请求
    • a标签的 href 属性
      • GET请求
    • form表单
      • GET请求/POST请求
    • Ajax
      • GET请求/POST请求

【3】简介

Ajax不是新的编程语言，而是一种使用现有标准的新方法(类比装饰器)

Ajax最大的优点就是不重新加载页面的情况下，可以与服务器交换数据并更新部分网页内容

这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程

  • Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的编程技术。

    • 它通过在网页上进行异步数据传输，实现了在不重新加载整个页面的情况下更新部分页面内容的能力。

  • Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互，以及利用DOM（Document Object Model）来动态地更新页面。

  • 通过使用Ajax，网页可以在后台与服务器进行数据交换，并在不刷新整个页面的情况下，根据服务器返回的数据实时更新页面的某些部分。

  • 这种技术带来了很多好处，比如提高了用户体验、减少了网络流量和服务器负载，并使得开发人员能够创建更加交互和动态的网页应用程序。

  • 虽然Ajax最初是指Asynchronous JavaScript and XML，但如今已经不仅限于使用XML作为数据传输的格式，而是可以使用各种格式，如JSON（JavaScript Object Notation）。

  • 总结起来，Ajax是一种强大的前端开发技术，通过异步数据传输和动态页面更新，提供了更好的用户体验和交互性，广泛应用于现代Web应用程序的开发中。

【二】Ajax引入

【1】案例

  • 页面上有三个 input 框
    • 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
    • 在后端计算出结果，再返回给前端动态展示的第三个input框中
  • 要求
    • 整个过程页面不能刷新，也不许在前端计算

（1.0）普通版

  • 后端
from django.shortcuts import render, HttpResponse


def ab_ajax(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
        num1 = request.POST.get('i1')  # 3 - 文本类型
        num2 = request.POST.get('i2')  # 4 - 文本类型
        # 强转类型并做运算
        sum = int(num1) + int(num2)
        # 返回数据
        return HttpResponse(sum)
    return render(request, 'ab_ajax.html')
  • html 页面
<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // string
                $('#d3').val(args)
            },
        })
    })
</script>

（2.0）升级版

  • 后端
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def ab_ajax(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
        num1 = request.POST.get('i1')  # 3 - 文本类型
        num2 = request.POST.get('i2')  # 4 - 文本类型
        # 强转类型并做运算
        sum = int(num1) + int(num2)
        # 返回数据
        data = {
            "message": "success",
            "sum": sum,
        }
        # 需要将数据序列化进行传输
        return HttpResponse(json.dumps(data))
    return render(request, 'ab_ajax.html')
  • html 前端
<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            // 参数 - 会自动反序列化 传过来的数据
            {#dataType:true,#}
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                $('#d3').val(args)
            },
        })
    })
</script>

（3.0）升级

  • 后端
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def ab_ajax(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
        num1 = request.POST.get('i1')  # 3 - 文本类型
        num2 = request.POST.get('i2')  # 4 - 文本类型
        # 强转类型并做运算
        sum = int(num1) + int(num2)
        # 返回数据
        data = {
            "message": "success",
            "sum": sum,
        }
        # 需要将数据序列化进行传输
        return JsonResponse(data)
    return render(request, 'ab_ajax.html')
  • html 前端
<body>

<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<p>
    <button id="btn">点我</button>
</p>

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            // 参数 - 会自动反序列化 传过来的数据
            {#dataType:true,#}
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // object
                // 经过 JsonResponse 处理过的数据传过来的是 object 对象
                // object 对象 可以直接 . 属性
                $('#d3').val(args.sum)
            },
        })
    })
</script>

</body>

【2】小结

（1）基本语法

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
            
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // string
                $('#d3').val(args)
            },
        })
    })
</script>

（2）注意

  • 针对后端如果是用 HttpResponse 返回的数据，回调函数不会自动帮我们反序列化
  • 针对后端如果是用 JsonResponse 返回的数据，回调函数会自动帮我们反序列化

（3）HttpResponse 解决方式

  • 后端先进行序列化，再返回数据给前端
  • 前端加参数进行反序列化