将JSON输出到html表

我在选项卡中输出JSON到HTML表格时遇到了麻烦（对于javascript / jQuery晚间课程作业的一部分）。 请有人看看，并建议我必须以表格forms输出什么样的修改？ 我得到了成功警报，但表格没有填充。

谢谢。

// 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 = $("") $("#table").append(row); row.append($("" + rowData.course + "")); row.append($("" + rowData.name + "")); row.append($("" + rowData.price + "")); } 

和HTML：

 
 
 
 Italian 
 
 Spanish 
 
 
 
 
 
 
 
Course
 
Name
 
Price
 
 
 
 
 
 
  

Answer 1

您的代码的主要问题是在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 += '' + data[i].course + '' + data[i].name + '' + data[i].price + ''; } $('#table tbody').append(html); } 

  
 
 
 
Course
 
Name
 
Price
 
 
 
  

Answer 2

 // 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 = $("") $("#table").append(row); row.append($("" + rowData.course + "")); row.append($("" + rowData.name + "")); row.append($("" + rowData.price + "")); }