将JSON输出到html表 [英] Output JSON to html table

问题描述

我无法在我的标签页中输出JSON到HTML表格（对于javascript / jQuery晚间课程作业的一部分）。
请有人看看，并建议我必须以表格格式输出哪些修改？
我收到成功提醒，但表格没有填充。

I'm having trouble outputting a JSON to a HTML table within my tab (for part of a javascript/jQuery evening course assignment). Please could someone have a look, and advise what sort of amendments I would have to make to output in a table format? I get the success alert, but the table doesn't populate.

谢谢。

// 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>

推荐答案

您的代码的主要问题是您没有'在AJAX请求成功完成后调用任何函数。您至少需要调用 drawTable（）来填充数据。

The main issue with your code was that you didn't call any function after the AJAX request completed successfully. You needed at least call drawTable() to populate the data.

但是您可以对其进行一些改进你的代码。首先，删除 jsonp：'callback'。它是默认值，并且在您提供 jsonpCallback 时也是多余的。然后，您还可以将 jsonpCallback 更改为'drawTable'。这消除了对 success 处理函数的需要，并且意味着所有请求数据将直接提供给 drawTable（）功能。最后，不是在内存中创建DOM元素并在循环的每次迭代中附加，而是使用所有表的HTML构建单个字符串并在最终确定时附加一次更快。

However there are several improvements you can make to your code. Firstly, remove jsonp: 'callback'. It's the default value, and also redundant as you're supplying jsonpCallback. You can also then change jsonpCallback to 'drawTable'. This negates the need for the success handler function and means all the request data will be directly provided to your drawTable() function. Lastly, rather than creating DOM elements in memory and appending in each iteration of the loop it's much quicker to build a single string with all the table's HTML and append it once when finalised.

尽管如此，试试这个：

$(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缩减为仅相关部分。

Note that I reduced the HTML shown here to only the relevant parts.

这篇关于将JSON输出到html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！