软件技术NINI 2024-09-14 18:19 采纳率: 100%
浏览 2
已结题

使用原生JavaScript（不使用jQuery等库）编写一个Ajax请求，从某个API（如JSONPlaceholder）获取数据，并将数据显示在页面上。

1.Ajax请求：题目：使用原生JavaScript（不使用jQuery等库）编写一个Ajax请求，从某个API（如JSONPlaceholder）获取数据，并将数据显示在页面上。
a.提示：使用XMLHttpRequest对象或fetch API。

  • 写回答

2条回答 默认 最新

  • 广龙宇 后端领域新星创作者 2024-09-14 18:24
    关注

    这都2024年了，还有人在用XMLHttpRequest来做请求？？？
    建议使用最新的fetch API来实现
    以下是一个使用 Fetch API 请求数据并将数据写入页面body的示例（可以直接运行）：

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
</head>

<body>
    <script>
        // 定义要请求的接口地址
        const url = 'https://jsonplaceholder.typicode.com/todos/1';
        // 使用 Fetch API 进行请求
        fetch(url)
          .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
          .then(data => {
                // 创建一个新的段落元素
                const p = document.createElement('p');
                // 将 JSON 数据转换为字符串并设置为段落的文本内容
                p.textContent = JSON.stringify(data);
                // 将段落元素添加到页面的 body 元素中
                document.body.appendChild(p);
            })
          .catch(error => {
                console.error('Error:', error);
            });
    </script>
</body>

</html>

    在上述代码中：

    1. 先通过fetch请求数据，在第二个.then中处理请求成功得到的data。
    2. 使用document.createElement('p')创建一个新的p元素。
    3. 将获取到的JSON数据通过JSON.stringify(data)转换为字符串，并赋值给新创建的p元素的textContent属性。
    4. 最后通过document.body.appendChild(p)将包含数据的p元素添加到页面的body中。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 9月14日
  • 已采纳回答 9月14日
  • 创建了问题 9月14日

悬赏问题

  • ¥15 jetson nano
  • ¥15 :app:debugCompileClasspath'.
  • ¥15 windows c++内嵌qt出现数据转换问题。
  • ¥20 公众号如何实现点击超链接后自动发送文字
  • ¥15 用php隐藏类名和增加类名
  • ¥15 算法设计与分析课程的提问
  • ¥15 用MATLAB汇总拟合图
  • ¥15 智能除草机器人方案设计
  • ¥15 对接wps协作接口实现消息发送
  • ¥15 SQLite 出现“Database is locked” 如何解决？