jquery - load() JSON 数据，生成 HTML 表格并将其放置在 div 内

Question

我可能有一个非常简单的 jQuery 问题 - 可能遗漏了一点点。

我有一个按钮，可以从 PHP 脚本加载 JSON 格式的数据:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function showLastGame(id) {
        $('#top').load('http://preferans.de/cards-json.php?id=' + id + '&limit=1');
}
</script>

...

Show your last game »
<input type="button" onclick="showLastGame('DE13370')" value="Show">

效果很好 - 单击按钮后我可以看到加载的 JSON 数据。

但我实际上想将加载的数据传递给 JavaScript 函数(我正在尝试重用 dataTables 中的一个)，该函数将构造一个返回 HTML 表作为字符串:

function renderGame(cardsTable, nTr) {
        var aData   = cardsTable.fnGetData(nTr);
        //console.dir(aData);
        // .... HTML table constructed here....
        return str;
}

请问如何做到这一点？

如何将生成的字符串放入 #top div 中？

Answer 1

使用常规jQuery.ajax()调用而不是 .load():

$.ajax({
    url: '/cards-json.php',
    data: {
        id: id,
        limit: 1
    },
    dataType: 'json',
    ...
}).done(function(data) {
    // data is your JSON - use it however you want here
    var topHtml = renderGame(arg1, arg2);
    $('#top').html(topHtml);
});

我假设 renderGame 函数是返回 #top 元素的 HTML 内容的函数；如果不是，则将其更改为正确的函数调用。