0

我一直在尝试一段时间来弄清楚如何在 jquery mobile 中使用 json 生成列表视图。我在网上找到了很多例子，但是我对 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>

我的列表视图中没有任何内容，我不知道为什么！？

请提前帮助和感谢:-)

4

1 回答 1

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;               

 });

玩得开心！！

于 2013-10-24T18:01:58.497 回答