如何将 Json 数据导入 Jquery 移动应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15476635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Get Json Data into Jquery Mobile Application
提问by Kuthay Gümü?
I'm making basic "news" application in dreamviewer with Jquery Mobile.
我正在使用 Jquery Mobile 在 Dreamviewer 中制作基本的“新闻”应用程序。
I made all design but now its time to get the Json data from my api server into my application.
我完成了所有设计，但现在是时候将 Json 数据从我的 api 服务器获取到我的应用程序中了。
Here is my api server link ; f.e. "http:/mywebapiurl"
这是我的 api 服务器链接；fe "http:/mywebapiurl"
i think i need to write Jquery function about getJson but i dont know how to make it ?
我想我需要编写关于 getJson 的 Jquery 函数，但我不知道如何实现？
How will i put it in to my listview with small article picture, articletitle and articleheadline ?
我将如何将其放入带有小文章图片、文章标题和文章标题的列表视图中？
Here is sample of my listview which i'm going to show the news coming from Json.
这是我的列表视图示例，我将显示来自 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>
here is the code sample i tried ;
这是我试过的代码示例；
<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>
waiting your answer.
等待你的回答。
Thank you very much.
非常感谢。
回答by Gajotres
Working jsFiddle example: http://jsfiddle.net/Gajotres/8uac7/
工作 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');
}
}
In your case, just change dataType: "jsonp"to dataType: "json".
在您的情况下，只需将dataType: "jsonp"更改为dataType: "json"。
EDIT :
编辑 ：
document readyshould not be used with a jQuery Mobile. Usually it will trigger before a page is loaded into the DOM.
document ready不应与jQuery Mobile. 通常它会在页面加载到DOM.
This can be fixed with an appropriate jQuery Mobile page event, like this:
这可以通过适当的 jQuery Mobile 页面事件来修复，如下所示：
$(document).on('pagebeforeshow', '#home', function(){
});
More information about page events and how they work can be found in this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
关于页面事件及其工作原理的更多信息可以在这篇文章中找到，为了透明，它是我的个人博客。或者在这里找到它。
$.getJSON vs $.ajax
$.getJSON 与 $.ajax
I prefer $.ajaxbecause it works better with jQuery Mobile, specially if you need to show/hideajax page loader or do a cross domain call like in my example. But all together it is the same.
我更喜欢$.ajax它，因为它与jQuery Mobile一起工作得更好，特别是如果您需要show/hideajax 页面加载器或像我的示例中那样进行跨域调用。但总的来说，它是一样的。
回答by Imperative
What have you tried? JQuery is pretty straight forward on the json topic, schema:
你尝试过什么？JQuery 在 json 主题和架构上非常直接：
$(function() {
$.getJSON('/api', function(data) {
var $foo = $('#foo');
for(vari=0; i<data.length; i++) {
$foo.append('<div>'+data[i][title]+'</div>');
}
});
});
