如何将 Json 数据导入 Jquery 移动应用程序答案

【问题标题】：How To Get Json Data into Jquery Mobile Application如何将 Json 数据导入 Jquery 移动应用程序
【发布时间】：2013-03-06 18:40:46
【问题描述】：

我正在使用 Jquery Mobile 在 Dreamviewer 中制作基本的“新闻”应用程序。

我完成了所有设计，但现在是时候将 Json 数据从我的 api 服务器获取到我的应用程序中了。

这是我的 api 服务器链接； f.e. "http://mywebapiurl"

我想我需要写一个关于getJson的Jquery函数，但我不知道怎么做？

如何将它与小文章图片、文章标题和文章标题一起放入我的列表视图中？

这是我的列表视图示例，我将展示来自 Json 的新闻。

<body> 
<div data-role="page" id="home">
<div data-role="header">
    <h1>Post Mobile</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" data-inset="true">
                     <li><a href="#headline">
         <img src=ArticlePicture" class="ui-li-has-thumb"/>
         <h3>ArticleTitle</h3>
         <p>ArticleHeadline</p>
                     </a></li>
                </ul>       
</div>
      <div data-role="footer"  data-position="fixed">
      <h4>&copy; funky app </h4>
</div>

这是我尝试过的代码示例；

    <script>
  $(document).ready(function() {
   $.getJSON("http://mywebapiurl", function(data) {
      var result= "";
      $.each(data.LatestNews, function(index, value) {
result+= "<ul><li><a href='#'><h3>"+value.TITLE+"</h3><p>"+value.SPOT+"</p></a></li></ul>"; 
});
    $("#articleContainer").html(result);
})
});
</script>

等待您的答复。

非常感谢。

【问题讨论】：

标签： jquery json cordova jquery-mobile

【解决方案1】：

工作 jsFiddle 示例：http://jsfiddle.net/Gajotres/8uac7/

$(document).on('pagebeforeshow', '#home', function(e, data){      
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});


var ajax = {  
    parseJSONP:function(result){
        $.each( result, function(i, row) {
            $('#movie-data').append('<li><a href="#headline"><img src="http://www.incine.fr/media/photos_films/original/1285_4bc92529017a3c57fe00ee84_1293130970.jpg" class="ui-li-has-thumb"/><h3>' + row.original_name+ '</h3><p>' + row.overview+ '</p></a></li>');
        });
        $('#movie-data').listview('refresh');
    }
}

在您的情况下，只需将 dataType: "jsonp" 更改为 dataType: "json"。

编辑：

document ready 不应与 jQuery Mobile 一起使用。通常它会在页面加载到 DOM 之前触发。

这可以通过适当的 jQuery Mobile 页面事件来解决，如下所示：

$(document).on('pagebeforeshow', '#home', function(){      
  
});

有关页面事件及其工作原理的更多信息可以在此 ARTICLE 中找到，为了透明，这是我的个人博客。或者找到它HERE。

$.getJSON 与 $.ajax

我更喜欢 $.ajax 因为它与 jQuery Mobile 配合得更好，特别是如果您需要 show/hide ajax 页面加载器或执行像我的示例中的跨域调用。但总的来说是一样的。

【讨论】：

非常感谢我朋友的例子。我现在真的明白如何指导它了。也感谢其他提示。
Np，如果您需要更多帮助，请通过我的电子邮件与我联系，您可以在我的个人资料中找到。

【解决方案2】：

你试过什么？ JQuery 在 json 主题上非常直截了当，架构：

$(function() {
    $.getJSON('/api', function(data) {
        var $foo = $('#foo');
        for(vari=0; i<data.length; i++) {
            $foo.append('<div>'+data[i][title]+'</div>');
        }
    });
});

【讨论】：

你不需要帮助我。而且我没有要求任何人完成整个工作。仔细阅读，我只需要了解如何将我的 json 数据定向到 jquery mobile 中的 listview。