[英]Output JSON to html table
我无法将 JSON 输出到我的选项卡中的 HTML 表(对于 javascript/jQuery 夜间课程作业的一部分)。 请有人看看,并建议我必须进行什么样的修改才能以表格格式输出? 我收到成功警报,但表格没有填充。
谢谢。
// Tabs
$(function() {
$( "#tabs" ).tabs();
});
// Spanish
$(document).ready(function(){
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", // path to file
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function () {
alert('success');
}
});
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.course + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.price + "</td>"));
}
和 HTML:
<div id="tabs">
<ol start="50">
<li>
<a href="#tab-1">Italian</a>
</li>
<li>
<a href="#tab-2">Spanish</a>
</li>
</ol>
<p id="tab-1"></p>
<p id="tab-2">
<table id='table'>
<thead>
<tr>
<th>Course</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</p>
<p id="tab-3"></p>
</div>
// Tabs
$(function() {
$( "#tabs" ).tabs();
});
// Spanish
$(document).ready(function(){
$.ajax({
url: "http://learn.cf.ac.uk/ webstudent/sem5tl/javascript/assignments/spanish.php",
// path to file
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
// The var you put on this func will store data
success: function (data) {
alert('success');
// Call the function passing the data recieved
drawTable(data);
}
});
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.course + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.price + "</td>"));
}
您的代码的主要问题是在 AJAX 请求成功完成后您没有调用任何函数。 您至少需要调用drawTable()
来填充数据。
但是,您可以对代码进行一些改进。 首先,删除jsonp: 'callback'
。 它是默认值,并且在您提供jsonpCallback
也是多余的。 然后,您还可以将jsonpCallback
更改为'drawTable'
。 这不需要success
处理函数,意味着所有请求数据都将直接提供给您的drawTable()
函数。 最后,与其在内存中创建 DOM 元素并在循环的每次迭代中附加,不如使用所有表格的 HTML 构建单个字符串并在完成时附加一次要快得多。
说了这么多,试试这个:
$(document).ready(function() { $.ajax({ url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", dataType: 'jsonp', jsonpCallback: 'drawTable' }); }); function drawTable(data) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<tr><td>' + data[i].course + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>'; } $('#table tbody').append(html); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <th>Course</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody></tbody> </table>
请注意,我将此处显示的 HTML 缩减为仅相关部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.