javascript 在表中使用 AJAX 获取数据

ej83mcc0 于 2023-05-12 发布在 Java

关注(0)|答案(3)|浏览(115)

<!DOCTYPE html>
<html>
  <head>
    <title>Fetch data from API and display in table using AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <h1>Data</h1>
    <table id="table" border="1"></table>

    <script>
      function load(){
        fetch("url")
          .then(result => result.json)
          .then(json => show(json)) }
      function show(data){
      let table = document.getElementById('table');
      for(let i=0; i< data.length; i++){
        let obj = data[i];
        console.log(obj);
        let row = document.createElement('tr');
        let name = document. createElement('td');
        id.innerHTML = obj.
        row.appendChild(name)
        table.appendChild(row)
  }

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

我需要从一个URL获取数据。我必须把它放在一张table上。首先，我只需要显示一个按钮“查看更多”的用户名。当查看更多将被点击，我必须从另一个API获取与该特定用户名相关的数据。我写了几行代码，但它们不工作。有什么建议吗？your text

JavaScript

来源：https://stackoverflow.com/questions/76224760/fetching-data-using-ajax-in-a-table

3条答案

按热度按时间

91zkwejq1#

下面是一个更简单的纯JavaScript版本
你需要调用.json（）来获取对象
我只是猜测你的意思是“显示更多”，但这里是一个工作脚本

let table;
const show = (data) => {
  table.innerHTML = data
    .map(({id,name,email, gender,status}) => `<tr>
      <td colspan="3">${name} <button class="more" data-id="${id}">view more...</button></td></tr>
      <tr hidden><td>${email}</td>
      <td>${gender}</td>
      <td>${status}</td>
      </tr>`)
    .join("");
};
const load = () => {
  fetch("https://gorest.co.in/public/v2/users")
    .then(result => result.json())
    .then(show);
};
window.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById('table');
  table.addEventListener("click", (e) => {
    const tgt = e.target.closest("button");
    if (!tgt) return;
    // id can be gotten from tgt.dataset.id if needed
    tgt.closest("tr").nextElementSibling.hidden = false;
  })
  load();
});

.more { float:right; margin-left: 5px; }

<h1>Data</h1>
<table border="1">
  <tbody id="table"></tbody>
</table>

赞(0）回复(0）举报 2023-05-12

vof42yt12#

最好使用$.append而不是appenChild

<!DOCTYPE html>
<html>
  <head>
    <title>Fetch data from API and display in table using AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <h1>Data</h1>
    <table id="table">
       <tbody></tbody>
    </table>

    <script>
      async function load(){
        let json = await(
        await fetch("https://gorest.co.in/public/v2/users")
        ).json()
        show(json) 
          }
      function show(data){
      for(let i=0; i< data.length; i++){
        let obj = data[i];
        $('#table tbody').append(`
          <tr>
            <td> ${obj.name} </td>
            <td> ${obj.email} </td>
          </tr>
        `)
       }
     };load()
    </script>
  </body>
</html>

赞(0）回复(0）举报 2023-05-12

qfe3c7zg3#

使用id数据管理view more以获得更多功能。它更有效

<!DOCTYPE html>
<html>
  <head>
    <title>Fetch data from API and display in table using AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <h1>Data</h1>
    <table id="table" border="1">
       <tbody></tbody>
    </table>
    <script>
      let moreData = {}
      function viewMore(id){
        console.log(moreData[id])
      }
      function show(data){
        data.forEach(obj=>{
         moreData[obj.id] = obj;
        $('#table tbody').append(`
          <tr>
            <td> ${obj.name} </td>
            <td ><button onclick="viewMore(${obj.id})">
            View More</button></td>
          </tr>`)})
       }
    $(document).ready(function(){
      $.get("https://gorest.co.in/public/v2/users", show)
    })
    </script>
  </body>
</html>

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 在表中使用 AJAX 获取数据

3条答案

相关问题

热门标签

最新问答