我是一名初學(xué)者開發(fā)人員，今天我嘗試搜索 ajax 并得到以下結(jié)果。完成此操作后，如果您嘗試運(yùn)行它，您可以說(shuō)“undefind”。我該如何解決這個(gè)問(wèn)題？這是您打字的地方。<input id="word" type="text" placeholder="test type"><input type="button" id="btn" value="click">這是一個(gè)腳本。 $("#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 回答
喵喵時(shí)光機(jī)
TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
我只是創(chuàng)建或使用通用 jQuery 插件函數(shù)將 JSON 數(shù)據(jù)轉(zhuǎn)換為表元素。
另外，我建議使用fetch而不是$.ajax，因?yàn)樗祷匾粋€(gè)承諾，并且它是獲取 API 數(shù)據(jù)的更現(xiàn)代的方式。
(($) => {
$.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 關(guān)注
- 117 瀏覽
添加回答
舉報(bào)
0/150
提交
取消