![](/img/trans.png)
[英]How to insert an accordion icon and do list toggling, if html data is coming from API instead of JSON response?
[英]How do I insert returned JSON data in a table, coming from an API
所以我有一個帶有FORM元素的表:
<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數據插入表中?
您可以獲得的值
<input id= "nameid" type="text" name="name" required>
同
var value = $("#nameid").val();
或用
$("#nameid").val("myname");
您可以使用jQuery ready或按鈕單擊事件來加載數據。 下面的代碼片段演示了一旦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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.