Question

function categories_get() {
    $this->load->database();
    $sql = 'SELECT genre AS Genre, COUNT(*) AS Records FROM games ';
    $sql .= 'GROUP BY genre;'   ;
    $query = $this->db->query($sql);
    $data = $query->result();   
    $this->response(json_encode($data),200);
}

我有一个MySQL数据库，它存储了游戏以及游戏类型。

我使用APIGEE控制台运行并测试了上述PHP函数，并输出了JSON数据。

http://creative.coventry.ac.uk/~4089797/Games/V1.0/index.php/games/categories

我尝试了一些不同的方法，但我无法弄清楚如何将这些数据动态输出到JQM的listview中。

<li><a href="#resultspage1" data-transition="slideup" onclick="Get()">Get Games All Categories</a></li>

这就是它的名称：

function Get(){
    $.ajax({
        url: 'http://creative.coventry.ac.uk/~4089797/Games/V1.0/index.php/games/categories',
        dataType: 'json',
        success: function(data) {

我坚持的一点就在这里。这是我尝试过但没有运气的。

        $('#output1').append('<li><a href="" data-transition="slideup" 
            onclick="Getgames('+genre+')">'+genre+'
            <div class="ui-li-count">'+genre.records+'</div>
            </a><li>'
        );

我知道我做错了但我不知道在哪里。

从中获取数据的表格称为games并且具有id, title, ean, genre, developer

        },
        error: function (response) {
            var r = jQuery.parseJSON(response.responseText);
            alert("Message: " + r.Message);
        }
    });
}

到目前为止这个功能是我的，但我不知道用什么来显示数据到这个列表视图

    <ul id="output1" data-role="listview"> </ul>

Answer 1

您的代码：

        $('#output1').append('<li><a href="" data-transition="slideup" 
            onclick="Getgames('+genre+')">'+genre+'
            <div class="ui-li-count">'+genre.records+'</div>
            </a><li>'
        );

有一个缺陷。您不能只在字符串中插入换行符，期望它继续。你必须放一个反斜杠来表示换行符实际上是字符串的一部分（反斜杠后面不是空格！）。

        $('#output1').append('<li><a href="" data-transition="slideup" \
            onclick="Getgames('+genre+')">'+genre+'\
            <div class="ui-li-count">'+genre.records+'</div>\
            </a><li>'
        );

好多了。

您也没有遍历您收到的JSON数据，这些数据被假定为包含“Genre”和“Records”作为成员的对象数组（区分大小写！）。我为你修复了这个问题，并为按钮添加了一个jQuery点击触发器而不是'onclick'属性。

$(document).ready(function() {
    // get button, get game categories
    $("#getbutton").click(function() {  
        $.ajax({
            // make sure this URL is local to your server!
            // otherwise browsers may prevent this since it may be dangerous to load external sources
            url: 'http://creative.coventry.ac.uk/~4089797/Games/V1.0/index.php/games/categories',
            dataType: 'json',
            success: function(data) {
                // loop through data array elements
                for(var i in data) {
                    // for each, append to the list
                    $('#output1').append('<li><a href="" data-transition="slideup"\
                        onclick="Getgames('+data[i].Genre+')">'+data[i].Genre+'\
                        <div class="ui-li-count">'+data[i].Records+'</div>\
                        </a><li>'
                    );
                }
            },
            error: function (response) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
            }
        });
    });
});

您必须对HTML进行的唯一更改是将id="getbutton"添加到按钮中（并删除onclick属性）：

<li><a id="getbutton" href="#resultspage1" data-transition="slideup">Get Games All Categories</a></li>

ajax get方法使用mysql数据库

1 个答案: