Ajax技术、MTV和MVC的概念

海棠未雨，梨花先雪，一半春休 / 2023-08-07 / 原文

一、Ajax技术

1、AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

局部刷新、一步提交

2、作用

前端技术，把前端的数据提交到后端的。Ajax技术就是局部刷新，异步提交，它不需要刷新整个页面，只需要刷新局部的，主要就是刷新的时候是无感知的

3、案例

html 前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" name="" id="d1">+
<input type="text" name="" id="d2">=
<input type="text" name="" id="d3">
<button class="btn btn-info">计算</button>
<script>
    $(".btn").click(function() {
        // 获取输入框中的内容
        var d1 = $("#d1").val();
        var d2 = $("#d2").val();

        // 前端数据提交到后端
        $.ajax({
            // 1、提交到哪里
            url: "",
            // 2、要指定请求方式提交
            type: "post",
            // 3、指定要传递的数据
            data: {'d1':d1,'d2':d2},
            // 4、回调函数, 接收后端返回的数据
            success : function(res){
                {#console.log(res);#}
                $("#d3").val(res)
            }
        })
    })
</script>

</body>
</html>

注意：Ajax 提交数据到后端的4个步骤

后端视图函数：

def index(request):
    if request.method == 'POST':
        # 接收参数
        d1 = request.POST.get('d1')
        d2 = request.POST.get('d2')

        # 做运算
        d3 = int(d1) + int(d2)
        return HttpResponse(d3)  # 返回给res

    return render(request, 'index.html')