Question

我无法在我的标签页中输出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>

Answer 1

// 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>"));
}

Answer 2

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

将JSON输出到html表

2 个答案: