Question

您好我正在为我的WordPress博客制作我的第一个移动应用程序。我在我的WordPress中安装了JSON API插件。我可以使用“example.com/api/get_recent_posts /".

来获取我的JSON数据

我创建了一个包含2页的HTML页面。第一页只是一个带按钮的列表。第二页是我想从JSON加载数据的地方。我研究了一些JQuery Mobile，并了解到加载动态内容的最佳方法是AJAX。

我见过很多例子，其中pagebeforeshow，pageinit与$ .getJSON函数或$ .ajax函数相结合：

$.ajax({
    url: '',
    type: 'GET',
    error : function (){ document.title='error'; }, 
    success: function (data) {
        //
    }
});

我只需要一本关于如何使用JQuery Mobile AJAX函数加载JSON提要的指南。

HTML代码：

<!-- Page: Home -->
    <div id="home" data-role="page">
        <div data-role="header">
            <h1>Menu</h1>
        </div><!-- /header -->
        <div data-role="listview">
            <p>This page is just a simple static page</p>
            <p><a href="#blogposts" class="ui-btn ui-shadow ui-corner-all" id="devotionclick" data-role="button">Load my blogs</a>
        </div><!-- links -->
    </div><!-- page -->

<!-- Page: Blog Posts -->
    <div id="blogposts" data-role="page">
        <div data-role="header" data-position="fixed">
            <h2>My Blog Posts</h2>
        </div><!-- header -->
        <div data-role="content">
            <ul id="postlist"> </ul><!-- content -->
        </div>
        <div class="load-more">Load More Posts...</div> 
    </div><!-- page -->

Answer 1

据我所知（并且，我可能会离开）JQuery Mobile只是常规JQuery的扩展，包含一些特定于移动设备的附加事件和方法。您仍然可以使用JQuery中熟悉的$ .ajax和$ .getJSON，只要您加载正常版本的JQ。

如果您选择希望提高移动性能的JQuery Mobile，请尝试ZeptoJS！

Answer 2

$ .getJSON是$ .ajax API的包装器，带有一些预设参数。我几乎只使用$ .getJSON，除非我需要对我的请求进行一些自定义（同步而不是异步，...）

如果您在第二页上需要某些内容，请尝试以下操作：

<div id="blogposts" data-role="page">
<script>
$(document).on('pagebeforeshow', '#blogposts', function() {
     $.getJSON('http://example.com/api/get_recent_posts/', null, function(data) {
         $.each(data, function(p, post) {
              console.log(post.title); //Or whatever JSON keys you get back in return
              //Add them to a listview, or whatever you need to do.
         });
     });

});
</script>
<!-- rest of your page goes here -->
</div>

请注意，在实例化pagebeforeshow调用时，您要指定页面ID。

有道理吗？

使用JQuery Mobile AJAX加载JSON数据

2 个答案: