如何插入一個表中返回的JSON數據，從API

來臨所以我有一個表單元素的表：如何插入一個表中返回的JSON數據，從API

<table id="example" class="sortable"> 
     <caption><h3><strong>Product inventory list</strong></h3></caption> 

     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Category</th> 
       <th>Amount</th> 
       <th>Location</th> 
       <th>Purchase date</th> 
      </tr> 
     </thead> 
     <tfoot> 
       <form id="myForm" action="http://wt.ops.few.vu.nl/api/xxxxxxxx" method="get"> 
       <td> 
         <input type="text" name="name" required> 
       </td> 
       <td> 
         <input type="text" name="category" required> 
       </td> 
       <td> 
         <input type="number" name="amount" required> 
       </td> 
       <td> 
         <input type="text" name="location" required> 
       </td> 
       <td> 
         <input type="date" name="date" required> 
       </td> 
       <td> 
         <input type="submit" value="Submit"> 
       </td> 
       </form> 
     </tfoot> 
    </table>

我填寫的信息獲取發送到我的API鏈接，但現在我需要在表格中直接添加我填寫的信息。

我知道我可以發送一個AJAX GET請求，以獲取存儲在API中的信息，但是如何將返回的JSON數據插入到表中？

來源

2017-01-22 W. van zeijl

首先，您需要爲每個輸入添加id標記。否則，代碼將如何知道從API返回值的位置？然後，google javascript getElementById – Reisclef

@Reisclef「document.querySelector」，「document.getElementsByClassName」等都是向表中添加「id」屬性的替代方法。 – djthoms

沒錯，我糾正了。同意將類名或querySelector作爲替代方法。但是，可能無法保證API順序能夠通過索引符合GUI。雖然課堂可以工作，但似乎不合適。我不應該把它寫成「需要」，而不是「你可能」。 – Reisclef

您可以

var value = $("#nameid").val();

得到

<input id= "nameid" type="text" name="name" required>

值或

$("#nameid").val("myname");

來源

2017-01-22 21:50:21 Maxiquester

可能希望在普通的JS（除了你的jQuery之外）中做到這一點，因爲OP沒有標記爲jQuery。 – Reisclef

那麼，清楚的問題*現在是*標籤jquery，所以，爲什麼任何人想要使它比必要更難？ – cars10m

設置它可以使用jQuery的準備或按鈕單擊事件加載數據。下面的代碼片段演示了在加載HTML文檔後自動加載數據。希望這個答案！

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Product Inventory List</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

</head> 

<body> 

<table id="products" class="sortable" border='1'> 
<caption><h3><strong>Product inventory list</strong></h3></caption> 
    <tr> 
     <th>Name</th> 
     <th>Category</th> 
     <th>Amount</th> 
     <th>Location</th> 
     <th>Purchase date</th> 
    </tr> 
</table> 

<script> 

var api = 'http://example.com/api/v1/products'; 

$(document).ready(function(){ 

    jQuery.support.cors = true; 

    $.ajax(
    { 
     type: "GET", 
     url: api + '/products', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     cache: false, 
     success: function (data) { 

     var trHTML = '';     
     $.each(data.products, function (i, item) {    
      trHTML += '<tr><td>' + data.products[i].name + '</td><td>' + data.products[i].category + '</td><td>' + data.products[i].amount + '</td><td>' + data.products[i].location + '</td><td>' + data.products[i].pdate + '</td></tr>'; 
     });   
     $('#products').append(trHTML); 

     }, 

     error: function (msg) {    
      alert(msg.responseText); 
     } 
    }); 
}) 

</script> 

</body> 
</html>

來源

2017-01-22 22:44:17 Sakthivel

如何插入一個表中返回的JSON數據，從API

回答

相關問題