将JSON输出到html表

将JSON输出到html表

代码的主要问题是，在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缩小为仅相关部分。