Django-Ajax

发表于 2019-12-18 更新于 2024-08-23 分类于 Python Python教程 Django 1.x 本文字数： 2.3k 阅读时长 ≈ 4 分钟

问题

使用视图通过上下文向模板传递数据，需要先加载完成模板的静态页面，再执行模型的代码，生成完整的html。返回浏览器，这个过程将页面与数据集成到了一起，扩展性差！

解决

通过ajax的方式获取数据，通过dom操作将数据呈现在页面上

实现

视图：

from django.http import JsonResponse


def showStudents(request):
    if request.is_ajax():
        stus = Student.objects.all()
        list = []
        for stu in stus:
            list.append({"name": stu.name, "age": stu.age})
        return JsonResponse({"data": list})
    else:
        return render(request, "myApp/showStudents.html")

页面：

$.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<body>
    <button id="btn">查看学生</button>
    <ul id="stulist"></ul>

    <script type="text/javascript">
        $(function () {
            $("#btn").bind("click", function () {
                $.get("/showStudents/", function (data, status) {
                    //console.log(data);
                    stus = data["data"];
                    for (var i = 0; i < stus.length; i++) {
                        stu = stus[i];
                        $li = $("<li>" + stu.name + "</li>");
                        $("#stulist").append($li);
                    }
                });
            });
        });
    </script>
</body>
</html>

$.ajax()(推荐使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<body>
    <button id="btn">查看学生</button>
    <ul id="stulist"></ul>

    <script type="text/javascript">
        $(function () {
            $("#btn").bind("click", function () {
                $.ajax({
                    type: "get",
                    url: "/showStudents/",
                    data: {"a": 1, "b": 1},
                    dataType: "json",
                    success: function (data, status) {
                        stus = data["data"];
                        for (var i = 0; i < stus.length; i++) {
                            stu = stus[i];
                            $li = $("<li>" + stu.name + "</li>");
                            $("#stulist").append($li);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>