2

我可能有一个非常简单的 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 &raquo;
<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;
}

请问这个怎么做？

以及如何将生成的字符串放入#topdiv 中？

4

3 回答 3

2

使用常规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 内容的函数；如果不是，则将其更改为正确的函数调用。

于 2013-01-23T14:29:33.430 回答
2 
<script type="text/javascript">
function renderGame(cardsTable, nTr, html) { // added html to be passed so it can be manipulated further

        // .... HTML table constructed here....
        // using things like `var part = $('selector',HTML_STRING)` you can extract parts
        // to modify, and build a string for the table with them

        var part1 = $('span.menu',html).eq(0) // get the first `span` with class `menu` from the html string passed and store in `part1`
        ... etc ...

        str = "<table><tr><td>" + part1 + "</td></tr></table>" // etc...

        return str;
}
function showLastGame(id) {
    // use `$.get` and a callback function after it got data
    $.get('/cards-json.php?id=' + id + '&limit=1',function(d){
        // d is a string containing the response of the `get` request
        var table = renderGame(???,???) // <~ not sure what variables your function takes
        // set the HTML of the target element
        $('#top').html(table);
    });
}
</script>
于 2013-01-23T14:34:43.690 回答
1

我认为一种方法是使用jQuery.getJson()

示例，根据您的代码：

function showLastGame(id) {
    $.getJSON('/cards-json.php?id=' + id + '&limit=1', function(data) {
        var html = '<ul>';
        $.each(data, function(key, val) {
            // Whatever you what to do, eg.
            html = html + '<li>' + key + ': ' + val + '</li'>);
        });
        html = html + '</ul>';
        $('#top').html(html);
    });
}
于 2013-01-23T14:34:35.903 回答