輸出JSON到html表格

Question

我無法將JSON輸出到我的選項卡（用於javascript/jQuery夜間課程任務的一部分）內的HTML表格中。 請有人看看，並建議我需要做什麼樣的修改以表格格式輸出？ 我收到了成功警報，但表中沒有填充。

謝謝。

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

與您的代碼的主要問題是，你沒有調用任何功能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。

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