使用mysql数据库的ajax get方法

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 中的列表视图中。

<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 数据，该数据被假定为包含“流派”和“记录”作为成员的对象数组（区分大小写！）。我为您解决了这个问题，并为按钮添加了一个 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>