如何在 Jquery Mobile 中加载 json 数据？答案

【问题标题】：How to load json data inside Jquery Mobile?如何在 Jquery Mobile 中加载 json 数据？
【发布时间】：2014-05-21 13:08:34
【问题描述】：

我正在开发 Jquery Mobile，我想在列表视图中获取 Json 数据，如链接 ListView 所示。我已经尝试过使用 Jquery 和 Ajax，它是成功的。但来到 Jquery Mobile 数据未加载。为什么？

JSFIDDLE

//code
var content='';     
      $.each(data,function(index,item){            
            content +=  '<img src="'+item.thumb+'"  class="userimage">';
            content +=  '<h3 class="userurl">'+item.keywords+'</h3>';                  
            content +='<p class="username">'+item.bombscount+'</p>';    
            });
      $('#ball').append(content);

【问题讨论】：

标签： javascript jquery ajax json jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/QZ342/9/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body> 
        <div data-role="page" id="index" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
            <div data-role="content" class="ui-content"> 
                <ul data-role="listview" class="ui-listview" id="ball">

                </ul>
            </div>
        </div>
    </body>
</html>

JavaScript：

$(document).ready(function(){
    $.getJSON("http://www.myappdemo.net/dev_bloopit/index.php/bloopit/Bloops?userid=145&category=popular&start=0",function(data){        
        var content='';     
        $.each(data,function(index,item){     
            content +=  '<li><a href="index.html"><img src="'+item.thumb+'"  class="userimage">';
            content +=  '<h3 class="userurl">'+item.keywords+'</h3>';                  
            content +='<p class="username">'+item.bombscount+'</p></a></li>';    
        });
        $('#ball').append(content);        
        $('#ball').listview('refresh');
    });
});

变化：

文档准备就绪未正确关闭
一次注意，不要使用 jQuery Mobile 准备好的文档，使用 pageinit 事件，但这不是重点
listview 创建不正确，所以我已经修复了布局
添加内容后列表视图未增强

【讨论】：

【解决方案2】：

您忘记关闭文档就绪功能。

这是一个有效的demo

});

【讨论】：

+1 用于实际发现和解释真正的问题:)

【解决方案3】：

您在这一行缺少引号（'）：

content +=  '<img src="'+item.thumb+'"  class="userimage">;

【讨论】：