一个ajax的例子

最新推荐文章于 2024-07-18 16:36:56 发布

骄阳似橙

最新推荐文章于 2024-07-18 16:36:56 发布

阅读量123

点赞数

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/weixin_47516566/article/details/133846724

版权

以下是一个简单的AJAX示例，它使用纯JavaScript来发起GET请求并处理来自服务器的响应。在这个示例中，我们将从服务器获取一些示例数据并在网页上显示：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX示例</title>
</head>
<body>
    <h1>AJAX示例</h1>
    <button id="loadData">加载数据</button>
    <div id="dataContainer"></div>

    <script>
        // 获取页面上的按钮和数据容器元素
        var loadDataButton = document.getElementById("loadData");
        var dataContainer = document.getElementById("dataContainer");

        // 添加点击事件处理程序
        loadDataButton.addEventListener("click", function () {
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 配置GET请求
            xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

            // 定义响应处理程序
            xhr.onload = function () {
                if (xhr.status === 200) {
                    // 响应成功，处理数据
                    var responseData = JSON.parse(xhr.responseText);
                    dataContainer.innerHTML = "用户ID: " + responseData.userId + "<br>标题: " + responseData.title + "<br>内容: " + responseData.body;
                } else {
                    // 响应出错
                    dataContainer.innerHTML = "请求出错：" + xhr.status;
                }
            };

            // 处理网络错误
            xhr.onerror = function () {
                dataContainer.innerHTML = "网络错误";
            };

            // 发送请求
            xhr.send();
        });
    </script>
</body>
</html>

在此示例中，当用户单击"加载数据"按钮时，会触发AJAX请求。该请求获取一个示例JSON数据，然后将数据显示在页面上。

要运行此示例，你可以将其保存为HTML文件，然后在浏览器中打开。点击"加载数据"按钮后，应该会看到从服务器获取的数据在页面上显示出来。

请注意，此示例使用了一个公开的JSON数据源（JSONPlaceholder）。在实际应用中，你需要将URL更改为你自己的服务器端API地址，以获取实际数据。此外，此示例使用了纯JavaScript，你还可以使用jQuery或其他JavaScript库来简化AJAX请求。

骄阳似橙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个ajax的例子

在实际应用中，你需要将URL更改为你自己的服务器端API地址，以获取实际数据。此外，此示例使用了纯JavaScript，你还可以使用jQuery或其他JavaScript库来简化AJAX请求。要运行此示例，你可以将其保存为HTML文件，然后在浏览器中打开。点击"加载数据"按钮后，应该会看到从服务器获取的数据在页面上显示出来。在此示例中，当用户单击"加载数据"按钮时，会触发AJAX请求。该请求获取一个示例JSON数据，然后将数据显示在页面上。请注意，此示例使用了一个公开的JSON数据源（
复制链接

扫一扫