我是一名初學者開發人員，今天我嘗試搜索 ajax 并得到以下結果。完成此操作后，如果您嘗試運行它，您可以說“undefind”。我該如何解決這個問題？這是您打字的地方。<input id="word" type="text" placeholder="test type"><input type="button" id="btn" value="click">這是一個腳本。 $("#btn").click(function search(target) { var word = target.value $.ajax({ url : "url"+word, dataType :"json", success : function(data) { var tb =$("<table />"); for(var i in data);{ var $addr =data[i].addr; var $code =data[i].cdoe; var $created_at =data[i].created_at; var $lat =data[i].lat; var $lng =data[i].lng; var $name =data[i].name; var $stock_at =data[i].stock_at var row =$("<tr />").append( $("<td />").text($addr), $("<td />").text($code), $("<td />").text($created_at), $("<td />").text($lat), $("<td />").text($lng), $("<td />").text($name), $("<td />").text($stock_at), ); tb.append(row); } $(".wrap").append(tb); }, }); });
1 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
我只是創建或使用通用 jQuery 插件函數將 JSON 數據轉換為表元素。
另外，我建議使用fetch而不是$.ajax，因為它返回一個承諾，并且它是獲取 API 數據的更現代的方式。
(($) => {
$.jsonToTable = function() {
let fields = Object.keys(data[0]);
return $('<table>')
.append($('<thead>').append($('<tr>')
.append(fields.map(field => {
return $('<th>').text(field);
}))))
.append($('<tbody>').append(data.map(record => {
return $('<tr>').append(fields.map(field => {
return $('<td>').text(record[field]);
}));
})));
};
})(jQuery)
const data = [
{ addr : 1, code : 1, create_at : 1, lat : 1, lng : 1, name : 1, stock_at : 1 },
{ addr : 2, code : 2, create_at : 2, lat : 2, lng : 2, name : 2, stock_at : 2 },
{ addr : 3, code : 3, create_at : 3, lat : 3, lng : 3, name : 3, stock_at : 3 },
{ addr : 4, code : 4, create_at : 4, lat : 4, lng : 4, name : 4, stock_at : 4 }
];
$('.wrap').append($.jsonToTable(data)); // Or use the button click method below...
$("#btn").click(function search(target) {
var word = target.value;
fetch("url" + word)
.then(response => response.json())
.then(json => $('.wrap').append($.jsonToTable(json)));
});
table { border-collapse: collapse; margin-top: 1em; }
table, th, td { border: thin solid grey; }
th, td { padding: 0.33em; }
thead tr { background: #D7D7D7 }
tbody tr:nth-child(even) { background: #F7F7F7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="word" type="text" placeholder="test type">
<input type="button" id="btn" value="click">
<div class="wrap"></div>
- 1 回答
- 0 關注
- 112 瀏覽
添加回答
舉報
0/150
提交
取消