使用 JQuery Mobile AJAX 加载 JSON 数据

Loading JSON data using JQuery Mobile AJAX

本文关键字：JSON 数据 加载 AJAX JQuery Mobile 使用      更新时间：2023-09-26
嗨，我

正在为我的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提要的指南。

网页代码：

<!-- 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 -->

据我所知（而且，我可能会关闭），JQuery Mobile 只是常规 JQuery 的扩展，包含一些特定于移动设备的其他事件和方法。你仍然可以使用你在JQuery中熟悉的$.ajax和$.getJSON，只要你也加载普通版本的JQ。

如果你选择JQuery Mobile希望提高移动性能，试试ZeptoJS！

$.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。

意义？

相关文章：