Question

我已经尝试了一段时间来弄清楚如何在jquery mobile中使用json生成listview。我在网上找到了很多例子，但我对json相当新，并且无法弄清楚我做错了什么？

这是生成json（test.php）的页面：

$matches = array(
        array('title' => 'Portugal Open', 'id' => 23),
        array('title' => 'Mallorca Invitational', 'id' => 87));
echo $json = json_encode($matches);

以下是我尝试生成列表视图的方法：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$(document).ready(function(){

        $.getJSON("test.php",function(data) {
                $.each(data.posts, function(i,data){

                $('#matches').children('ul').append('<li><a href="#">'+data.title+'</a></li>');

                });
            }
        );
        return false;
    });
});
</script>

</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content" id="matches">  
        <ul data-role="listview">

        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

我的列表视图中没有任何内容，我无法弄清楚原因！？

请提前帮助和感谢： - ）

Answer 1

试试这段代码，

 $(document).on('pageshow', '#page', function(){

       $("#page div:jqmData(role=content) #matches ul").empty();

        $.getJSON("test.php",function(data) {

            $.each(data.posts, function(i,data){

              var html="";
              html+="<li><a href='#'>"+data.title+"</a></li>";

              $("#page div:jqmData(role=content) #matches ul").append(html);

            });
        $("#page div:jqmData(role=content) #matches ul:visible").listview("refresh");

        });

    return false;               

 });

玩得开心!!

使用json jquery mobile生成listview

1 个答案: