Ajax、XMLHttpRequest、伪AJAX(iframe)

最新推荐文章于 2025-08-08 06:02:09 发布

kangle0224

最新推荐文章于 2025-08-08 06:02:09 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/kangle0224/article/details/84311643

python 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了使用Ajax和XMLHttpRequest进行前后端交互的方法，包括GET和POST请求的实现，展示了如何在Django框架下设置静态文件路径、添加路由，并通过实例代码演示了前端文件的编写过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、准备

1.1 设置静态文件路径

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

在这里插入图片描述

1.2 添加路由

在这里插入图片描述

1.3 写前端文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        .btn {
            background-color: antiquewhite;
            padding: 5px 20px;
            margin: 20px;
            color: black;
        }
    </style>
</head>
<body>
    <h1>Index</h1>
    <a class="btn" onclick="ajax1()">点我</a><br>
    <a class="btn" onclick="ajax2()">点我</a><br>
    <a class="btn" onclick="ajax3()">点我</a><br>
    <a class="btn" onclick="ajax4()">点我</a><br>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script>
        function ajax1() {
            $.ajax({
                url: "/ajax1",
                type: "GET",
                data: {"abc": 123},
                success: function (arg) {
                    console.log(arg)
                }
            })
        }
        function ajax2() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('GET', '/ajax2?p=123');
            xhr.send(null)
            
        }
        function ajax3() {
            $.ajax({
                url: "/ajax1",
                type: "POST",
                data: {"abc": 123},
                success: function (arg) {
                    console.log(arg)
                }
            })
        }
        function ajax4() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText);
                }
            };
            xhr.open('POST', '/ajax2');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 不加这句，django只会在request.body中添加数据，request.POST中没有数据
            xhr.send("p=123");

        }
    </script>
</body>
</html>