AJAX请求的相关介绍以及使用

最新推荐文章于 2022-03-25 18:52:39 发布

yaqinweiliang

最新推荐文章于 2022-03-25 18:52:39 发布

阅读量147

点赞数

分类专栏： python web

本文链接：https://blog.csdn.net/qq_37253540/article/details/80820138

版权

python web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

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

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

1、添加视图函数

import json
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")

2、在HTML文件中添加：

<!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">
        $(document).ready(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);#}
{#                    }#}
{#                });#}
                $.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>

yaqinweiliang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX请求的相关介绍以及使用

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJA...
复制链接

扫一扫