gpt4 book ai didi

jquery - 如何将 Json 数据导入 Jquery 移动应用程序

转载 作者:行者123 更新时间:2023-12-03 22:45:15 25 4
gpt4 key购买 nike

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

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

这是我的 api 服务器链接; FE “http://mywebapiurl”

我想我需要编写关于 getJson 的 Jquery 函数,但我不知道如何制作?

我如何将它与小文章图片、文章标题和文章标题一起放入我的 ListView 中?

这是我的 ListView 的示例,我将显示来自 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>

等待您的答复。

非常感谢。

最佳答案

工作 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 页面加载器或执行跨域调用,如我的示例中所示。但总的来说都是一样的。

关于jquery - 如何将 Json 数据导入 Jquery 移动应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15476635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com