时间戳

首页 > 解决方案 > 尝试使用 javascript 从 api 获取数据

javascript - 尝试使用 javascript 从 api 获取数据

问题描述

我正在尝试使用 javascript 和 html 从在线 MongoDb 数据库中获取数据。但它不能正常工作。也使用 jquery 库

<div>
    <input type="submit" value="GET DATA FROM API" id="getAPI">
    <div id="result" ></div>
    <div ><h2>Input Form</h2></div>
    <form id="postData" >
    </form>
</div>
<!-- javascript part -->
<script>
    document.getElementById('getAPI').addEventListener('click', getAPI);
    function getAPI() {
        fetch('http://localhost:3000/api/seller')
            .then((res) => { return res.json() })
            .then((data) => {
                let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
                data.forEach((seller) => {
                    const {id, name, email} = seller
                    result +=
                        `<div>
                                <h5> User ID: ${id} </h5>
                                <ul>
                                    <li> User Full Name : ${name}</li>
                                    <li> User Email : ${email} </li>
                                </ul>
                             </div>`;
                    document.getElementById('result').innerHTML = result;
                });
            })
    }
</script>

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

标签： javascripthtmlnode.js

解决方案

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => {
    return res.json();
  })
  .then(data => {
    let result = `<h2> Random User Info From Jsonplaceholder API</h2>`;
    data.forEach(seller => {
      const {
        id,
        name,
        email
      } = seller;
      result += `<div>
                   <h5> User ID: ${id} </h5>
                   <ul>
                     <li> User Full Name : ${name}</li>
                     <li> User Email : ${email} </li>
                   </ul>
                 </div>`;
      document.getElementById("app").innerHTML = result;
    });
  });
<div id="app"></div>

您的前端运行良好。我替换了您代码中的 api url，一切都很好。它可能是后端的东西。您是否检查了从服务器获得的状态码？

推荐阅读