Question

我问过类似的查询，但觉得我应该开始一个新问题，因为这并不是完全相关的。我试图从两个单独的文件（spanish.php＆amp; italian.php）输出Json。当我只填充一个选项卡时，我已经让代码工作正常，但是当我尝试填充两个选项卡时它似乎不起作用。有谁知道我哪里出错了？

// TABS FUNCTIONS

         $(function() {
            $("#tabs").tabs();
         });

    // SPANISH MENU

    $(document).ready(function(){
        $.ajax({ 
            url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", 
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            success: function (data) {
                drawTable(data);
            }               
        });
    });

    function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

    function drawRow(rowData) {
        var row = $("<tr />")
        $("#table2").append(row);
        row.append($("<td>" + rowData.course + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.price + "</td>"));
    }


    // ITALIAN MENU

    $(document).ready(function(){
        $.ajax({ 
            url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php", 
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'jsonpCallback',
            success: function (dataI) {
                drawTable(dataI);
            }               
        });
    });

    function drawTable(dataI) {
    for (var i = 0; i < dataI.length; i++) {
            drawRow(dataI[i]);
        }
    }

    function drawRow(rowData) {
        var row = $("<tr />")
        $("#table1").append(row);
        row.append($("<td>" + rowData.course + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.price + "</td>"));
    }

标签/ html：

<div id="tabs">
            <ul>
                <li><a href="#tab-1">Italian</a></li>
                <li><a href="#tab-2">Spanish</a></li>
            </ul>

            <div id="tab-1">
            <p>Italian</p>
            <table id='table1'>
                    <tbody></tbody>
                </table>    
            </div>

            <div id="tab-2">
                <table id='table2' border="1">
                    <tbody></tbody>
                </table>
            </div>
        </div>

Answer 1

这：$ (function () {

等于：$ (document) .ready (function () {

所以你不必把两者都放，或者不止一次。只使用一次，然后将代码放入其中。

所以我尝试使用您的代码，我刚删除了jsonpCallback: 'jsonpCallback',然后它运行正常，因为您没有callback function。最终会像：

$(document).ready(function(){

    // SPANISH MENU
    $.ajax({ 
        url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", 
        dataType: 'jsonp',
        success: function (data) {
            drawTable(data, 1);
        }               
    });


    // ITALIAN MENU
    $.ajax({ 
        url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/italian.php", 
        dataType: 'jsonp',
        success: function (data) {
            drawTable(data, 2);
        }               
    });
});

function drawTable(data, table_number) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i], table_number);
    }
}

function drawRow(rowData, table_number) {
    var row = $("<tr />")
    $("#table" + table_number).append(row);
    row.append($("<td>" + rowData.course + "</td>"));
    row.append($("<td>" + rowData.name + "</td>"));
    row.append($("<td>" + rowData.price + "</td>"));
}

2 Ajax将输出调用到单独的Jquery选项卡

1 个答案: