Kut*_*müş 6 jquery json jquery-mobile cordova
我正在使用Jquery Mobile在dreamviewer中制作基本的"新闻"应用程序.
我做了所有的设计,但现在是时候把我的api服务器上的Json数据放到我的应用程序中了.
这是我的api服务器链接; fe"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>© 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>
等你的回答.
非常感谢你.
Gaj*_*res 15
工作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(){
});
有关页面事件以及它们如何工作的更多信息可以在本作中找到文章,是透明这是我的个人博客.或者在这里找到它.
我更喜欢$.ajax因为它适用于jQuery Mobile,特别是如果你需要show/hideajax页面加载器或像我的例子那样进行跨域调用.但总的来说它是一样的.
| 归档时间： |
|
| 查看次数： |
27539 次 |
| 最近记录： |