JSONをhtmlテーブルに出力する

Question

javascript/jQueryの夜間コースの割り当ての一部として、自分のタブ内のHTMLテーブルにJSONを出力できません。 誰かが見て、テーブル形式で出力するためにどのような修正が必要か教えてください。 成功アラートが表示されますが、テーブルにデータが入力されません。

ありがとうございました。

// 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を含む単一の文字列を作成し、終了時に一度追加する方がはるかに迅速です。私は唯一の関連する部分に、ここで示した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>

注：これを試して、言ったことすべてで

。

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