使用 JQuery Mobile AJAX 加载 JSON 数据

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。

有道理吗？