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

桃扇骨 2022-05-21 00:45 220阅读 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>