上一篇： 跨域请求

下一篇： 使用jQuery库简化AJAX操作

JSON数据处理

简介

AJAX是一种用于从服务器获取数据并在不刷新整个页面的情况下更新网页部分内容的技术。JSON是一种轻量级的数据交换格式，易于读取和编写。它是一种常用的数据格式，用于在Web应用程序中传输和存储数据。

准备工作

首先，确保您已经拥有以下软件：

  • 一个现代浏览器，例如Google Chrome、Firefox或Microsoft Edge
  • 一个文本编辑器，例如Visual Studio Code、Notepad++或Sublime Text

创建HTML文件

我们将从创建一个简单的HTML文件开始。在此文件中，我们将添加一个按钮和一个用于显示JSON数据的容器。请创建一个名为 index.html的文件，并在其中输入以下代码：

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>AJAX JSON 示例</title>
                </head>
                <body>
                    <button id="load-data-btn">加载数据</button>
                    <div id="data-container"></div>

                    <script src="main.js"></script>
                </body>
                </html>

创建JavaScript文件

接下来，我们将创建一个JavaScript文件，用于处理AJAX请求和JSON数据。在同一目录下创建一个名为 main.js的文件，并输入以下代码：

                document.getElementById('load-data-btn').addEventListener('click', loadData);

                function loadData() {
                    const xhr = new XMLHttpRequest();
                    xhr.open('GET', 'data.json', true);
                    xhr.onload = function() {
                        if (this.status === 200) {
                            const data = JSON.parse(this.responseText);
                            displayData(data);
                        }
                    };
                    xhr.send();
                }

                function displayData(data) {
                    const container = document.getElementById('data-container');
                    let output = '';

                    data.forEach((item) => {
                        output += `
                            <div>
                                <h3>${item.title}</h3>
                                <p>${item.description}</p>
                            </div>`;
                    });

                    container.innerHTML = output;
                }

此代码首先为“加载数据”按钮添加了一个点击事件监听器。当用户单击该按钮时，将调用 loadData函数。此函数向名为 data.json的文件发送一个异步GET请求，并在请求成功完成后将响应文本解析为JSON对象。然后，它将这些数据传递给 displayData函数以显示在网页上。

创建JSON文件

现在，我们需要一个包含JSON数据的文件。在同一目录下创建一个名为 data.json的文件，并输入以下示例数据：

                [
                    {
                        "title": "示例项目 1",
                        "description": "这是一个关于示例项目 1 的描述。"
                    },
                    {
                        "title": "示例项目 2",
                        "description": "这是一个关于示例项目 2 的描述。"
                    }
                ]

确保你的服务器支持跨源资源共享（CORS），否则可能会遇到安全策略问题。

测试

通过在浏览器中打开 index.html文件来测试你的Web应用程序。当单击“加载数据”按钮时，你应该能够看到JSON数据被加载并显示在网页上。

现在，你已经学会了如何使用AJAX技术处理JSON数据。你可以进一步扩展此示例应用程序，以满足特定需求，例如从Web API获取实时数据并显示到前端页面上。