使用Ajax在表格中获取数据

huangapple
go评论95阅读模式
英文:

Fetching data using ajax in a table

问题

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>从API获取数据并使用AJAX在表格中显示</title>
  5.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <h1>数据</h1>
  9.     <table id="table" border="1"></table>
  11.     <script>
  12.       function load(){
  13.         fetch("url")
  14.           .then(result => result.json())
  15.           .then(json => show(json))
  16.       }
  17.       
  18.       function show(data){
  19.         let table = document.getElementById('table');
  20.         for(let i=0; i< data.length; i++){
  21.           let obj = data[i];
  22.           console.log(obj);
  23.           let row = document.createElement('tr');
  24.           let name = document.createElement('td');
  25.           name.innerHTML = obj.username;
  26.           row.appendChild(name);
  27.           let viewMoreButton = document.createElement('td');
  28.           let button = document.createElement('button');
  29.           button.innerHTML = "查看更多";
  30.           button.addEventListener("click", function(){
  31.             // 在这里添加从另一个API获取数据的代码
  32.           });
  33.           viewMoreButton.appendChild(button);
  34.           row.appendChild(viewMoreButton);
  35.           table.appendChild(row);
  36.         }
  37.       }
  38.     </script>
  39.   </body>
  40. </html>

这是你提供的HTML代码的翻译，我还添加了一个"查看更多"按钮，并为该按钮添加了一个点击事件监听器，以便你可以在点击按钮时执行从另一个API获取数据的操作。

英文: 
  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;title&gt;Fetch data from API and display in table using AJAX&lt;/title&gt;
  5.     &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  6.   &lt;/head&gt;
  7.   &lt;body&gt;
  8.     &lt;h1&gt;Data&lt;/h1&gt;
  9.     &lt;table id=&quot;table&quot; border=&quot;1&quot;&gt;&lt;/table&gt;
  11.     &lt;script&gt;
  12.       function load(){
  13.         fetch(&quot;url&quot;)
  14.           .then(result =&gt; result.json)
  15.           .then(json =&gt; show(json)) }
  16.       function show(data){
  17.       let table = document.getElementById(&#39;table&#39;);
  18.       for(let i=0; i&lt; data.length; i++){
  19.         let obj = data[i];
  20.         console.log(obj);
  21.         let row = document.createElement(&#39;tr&#39;);
  22.         let name = document. createElement(&#39;td&#39;);
  23.         id.innerHTML = obj.
  24.         row.appendChild(name)
  25.         table.appendChild(row)
  26.   }
  29. }
  30.     &lt;/script&gt;
  31.   &lt;/body&gt;
  32. &lt;/html&gt;

I need to fetch data from a url. I have to present it in a table. First I only need to display username with a button "view more". When view more will be clicked I have to fetch data from another api related to that particular username .I have written few line of code but they are not working. Any suggestionns? your text

答案1

得分: 1

it might be better to use $.append instead of appenChild

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->




从API获取数据并使用AJAX在表格中显示


Data

  1. <script>
  2.   async function load(){
  3.     let json = await(
  4.     await fetch("https://gorest.co.in/public/v2/users")
  5.     ).json()
  6.     show(json) 
  7.       }
  8.   function show(data){
  9.   for(let i=0; i< data.length; i++){
  10.     let obj = data[i];
  11.     $('#table tbody').append(`
  12.       <tr>
  13.         <td> ${obj.name} </td>
  14.         <td> ${obj.email} </td>
  15.       </tr>
  16.     `)
  17.    }
  18.  };load()
  19. </script>


<!-- end snippet -->

英文:

it might be better to use $.append instead of appenChild

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;title&gt;Fetch data from API and display in table using AJAX&lt;/title&gt;
  5.     &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  6.   &lt;/head&gt;
  7.   &lt;body&gt;
  8.     &lt;h1&gt;Data&lt;/h1&gt;
  9.     &lt;table id=&quot;table&quot;&gt;
  10.        &lt;tbody&gt;&lt;/tbody&gt;
  11.     &lt;/table&gt;
  13.     &lt;script&gt;
  14.       async function load(){
  15.         let json = await(
  16.         await fetch(&quot;https://gorest.co.in/public/v2/users&quot;)
  17.         ).json()
  18.         show(json) 
  19.           }
  20.       function show(data){
  21.       for(let i=0; i&lt; data.length; i++){
  22.         let obj = data[i];
  23.         $(&#39;#table tbody&#39;).append(`
  24.           &lt;tr&gt;
  25.             &lt;td&gt; ${obj.name} &lt;/td&gt;
  26.             &lt;td&gt; ${obj.email} &lt;/td&gt;
  27.           &lt;/tr&gt;
  28.         `)
  29.        }
  30.      };load()
  31.     &lt;/script&gt;
  32.   &lt;/body&gt;
  33. &lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

以下是翻译好的内容：

这里是一个更简单的纯JavaScript版本

你需要调用 .json() 来获取对象

我只是猜测你在 "显示更多" 方面的意思，但这里是一个可工作的脚本

  1. let table;
  2. const show = (data) => {
  3.   table.innerHTML = data
  4.     .map(({id,name,email, gender,status}) => `<tr>
  5.       <td colspan="3">${name} <button class="more" data-id="${id}">查看更多...</button></td></tr>
  6.       <tr hidden><td>${email}</td>
  7.       <td>${gender}</td>
  8.       <td>${status}</td>
  9.       </tr>`)
  10.     .join("");
  11. };
  12. const load = () => {
  13.   fetch("https://gorest.co.in/public/v2/users")
  14.     .then(result => result.json())
  15.     .then(show);
  16. };
  17. window.addEventListener("DOMContentLoaded", () => {
  18.   table = document.getElementById('table');
  19.   table.addEventListener("click", (e) => {
  20.     const tgt = e.target.closest("button");
  21.     if (!tgt) return;
  22.     // 如果需要，可以从 tgt.dataset.id 获取 id
  23.     tgt.closest("tr").nextElementSibling.hidden = false;
  24.   })
  25.   load();
  26. });
  1. .more { float:right; margin-left: 5px; }
  1. <h1>数据</h1>
  2. <table border="1">
  3.   <tbody id="table"></tbody>
  4. </table>
英文:

Here is a simpler plain JavaScript version

You need to call .json() to get the object

I am only guessing what you meant with "show more" but here is a working script

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let table;
  2. const show = (data) =&gt; {
  3.   table.innerHTML = data
  4.     .map(({id,name,email, gender,status}) =&gt; `&lt;tr&gt;
  5.       &lt;td colspan=&quot;3&quot;&gt;${name} &lt;button class=&quot;more&quot; data-id=&quot;${id}&quot;&gt;view more...&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
  6.       &lt;tr hidden&gt;&lt;td&gt;${email}&lt;/td&gt;
  7.       &lt;td&gt;${gender}&lt;/td&gt;
  8.       &lt;td&gt;${status}&lt;/td&gt;
  9.       &lt;/tr&gt;`)
  10.     .join(&quot;&quot;);
  11. };
  12. const load = () =&gt; {
  13.   fetch(&quot;https://gorest.co.in/public/v2/users&quot;)
  14.     .then(result =&gt; result.json())
  15.     .then(show);
  16. };
  17. window.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
  18.   table = document.getElementById(&#39;table&#39;);
  19.   table.addEventListener(&quot;click&quot;, (e) =&gt; {
  20.     const tgt = e.target.closest(&quot;button&quot;);
  21.     if (!tgt) return;
  22.     // id can be gotten from tgt.dataset.id if needed
  23.     tgt.closest(&quot;tr&quot;).nextElementSibling.hidden = false;
  24.   })
  25.   load();
  26. });

<!-- language: lang-css -->

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

<!-- language: lang-html -->

  1. &lt;h1&gt;Data&lt;/h1&gt;
  2. &lt;table border=&quot;1&quot;&gt;
  3.   &lt;tbody id=&quot;table&quot;&gt;&lt;/tbody&gt;
  4. &lt;/table&gt;

<!-- end snippet -->

答案3

得分: 0

管理view more与id数据以实现更多功能。这更加有效。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>从API获取数据并使用AJAX在表格中显示</title>
  5.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <h1>数据</h1>
  9.     <table id="table" border="1">
  10.       <tbody></tbody>
  11.     </table>
  12.     <script>
  13.       let moreData = {}
  14.       function viewMore(id){
  15.         console.log(moreData[id])
  16.       }
  17.       function show(data){
  18.         data.forEach(obj=>{
  19.          moreData[obj.id] = obj;
  20.         $('#table tbody').append(`
  21.           <tr>
  22.             <td> ${obj.name} </td>
  23.             <td ><button onclick="viewMore(${obj.id})">
  24.             查看更多</button></td>
  25.           </tr>`)})
  26.        }
  27.     $(document).ready(function(){
  28.       $.get("https://gorest.co.in/public/v2/users", show)
  29.     })
  30.     </script>
  31.   </body>
  32. </html>

请注意，代码部分未翻译。

英文:

manage view more with id data for more functionality. it is more effective
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.   &lt;head&gt;
  4.     &lt;title&gt;Fetch data from API and display in table using AJAX&lt;/title&gt;
  5.     &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  6.   &lt;/head&gt;
  7.   &lt;body&gt;
  8.     &lt;h1&gt;Data&lt;/h1&gt;
  9.     &lt;table id=&quot;table&quot; border=&quot;1&quot;&gt;
  10.        &lt;tbody&gt;&lt;/tbody&gt;
  11.     &lt;/table&gt;
  12.     &lt;script&gt;
  13.       let moreData = {}
  14.       function viewMore(id){
  15.         console.log(moreData[id])
  16.       }
  17.       function show(data){
  18.         data.forEach(obj=&gt;{
  19.          moreData[obj.id] = obj;
  20.         $(&#39;#table tbody&#39;).append(`
  21.           &lt;tr&gt;
  22.             &lt;td&gt; ${obj.name} &lt;/td&gt;
  23.             &lt;td &gt;&lt;button onclick=&quot;viewMore(${obj.id})&quot;&gt;
  24.             View More&lt;/button&gt;&lt;/td&gt;
  25.           &lt;/tr&gt;`)})
  26.        }
  27.     $(document).ready(function(){
  28.       $.get(&quot;https://gorest.co.in/public/v2/users&quot;, show)
  29.     })
  30.     &lt;/script&gt;
  31.   &lt;/body&gt;
  32. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月11日 14:37:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76224760.html
  • ajax
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定