Question

我正在尝试将json字符串添加到html表中。对象数据是正确的，但它没有附加到表中。我的jquery追加声明我做错了什么？

    function GetSongs(id) {
        $.ajax(
        {
            type: "Get",
            url: "@Url.Action("GetSongs", "Game")",
            data: { playlistId : id },
            success: function (data) {
                json = data;
                obj = JSON.parse(json);
                for (var i = 0; i < data.length; i++) {
                    $('#song-table').append('<tr>'+ htmlEncode(obj[i].SongURL) +'</tr>');
                }

            }
        });
    }

HTML表：

               <div id="player-playlist">
                    <table id="song-table" style="width:420px">
                        <tr>
                            <th>Song</th>
                        </tr>
                        <tr>
                            <td>http://www.youtube.com/v/CFF0mV24WCY</td>
                        </tr>
                    </table>
                </div>

Answer 1

首先尝试调试输出你得到的数据，是从服务器端返回的JSON字符串，还尝试在tr内附加td，并为htmlEncode编写自定义函数htmlEncode，如下所示

function GetSongs(id) {
        $.ajax(
        {
            type: "Get",
            url: "@Url.Action("GetSongs", "Game")",
            data: { playlistId : id },
            success: function (data) {
                console.log(data);
                json = data;
                obj = $.parseJSON(json);
                for (var i = 0; i < data.length; i++) {
                    $('#song-table').append('<tr><td>'+ htmlEncode(obj[i].SongURL) +'</td></tr>');
                }

            }
        });
    }

function htmlEncode (value) {
    if (value) {
        return jQuery('<div />').text(value).html();
    } else {
        return '';
    }
}

Answer 2

您正尝试将其附加到<tr>而不是<td>。将其更改为：

$('#song-table').append('<tr><td>'+ htmlEncode(obj[i].SongURL) +'</td></tr>');

Answer 3

删除htmlEncode()，因为它未在您的js中定义，定义或删除

for (var i in obj) {
    $("#song-table").append("<tr><td>"+ obj[i].SongURL +"</td></tr>");
}

或

for (var i in obj) { $("#song-table").append("<tr><td>"+ htmlEncode(obj[i].SongURL) +"</td></tr>"); } function htmlEncode(string) { var pre = document.createElement('pre'); var text = document.createTextNode(string); pre.appendChild(text); return pre.innerHTML; }//end htmlEncode it escapes HTML

Html表行没有附加到指定的表

3 个答案: