title: Loading JSON data using JQuery Mobile AJAX
body: <p>Hi I am working on my first mobile app for my WordPress blog. I have installed the JSON API plugin in my WordPress. I can get to my JSON Data using "example.com/api/get_recent_posts/".</p>
  
  <p>I have created an HTML page with 2 pages. 1st page is just a list with with a button. The 2nd page is where I want to Load Datas from JSON. I have studied a bit of JQuery Mobile and learned that the best method to Load dynamic contents is AJAX.</p>
  
  <p>I have seen lots of examples out there where pagebeforeshow, pageinit combined with either $.getJSON function or below $.ajax function:</p>
  
  <pre><code>$.ajax({
      url: '',
      type: 'GET',
      error : function (){ document.title='error'; }, 
      success: function (data) {
          //
      }
  });
  </code></pre>
  
  <p>Please I just need a guide on how to Load the JSON feeds using JQuery Mobile AJAX functions.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;!-- Page: Home --&gt;
      &lt;div id="home" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Menu&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
          &lt;div data-role="listview"&gt;
              &lt;p&gt;This page is just a simple static page&lt;/p&gt;
              &lt;p&gt;&lt;a href="#blogposts" class="ui-btn ui-shadow ui-corner-all" id="devotionclick" data-role="button"&gt;Load my blogs&lt;/a&gt;
          &lt;/div&gt;&lt;!-- links --&gt;
      &lt;/div&gt;&lt;!-- page --&gt;
  
  &lt;!-- Page: Blog Posts --&gt;
      &lt;div id="blogposts" data-role="page"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
              &lt;h2&gt;My Blog Posts&lt;/h2&gt;
          &lt;/div&gt;&lt;!-- header --&gt;
          &lt;div data-role="content"&gt;
              &lt;ul id="postlist"&gt; &lt;/ul&gt;&lt;!-- content --&gt;
          &lt;/div&gt;
          &lt;div class="load-more"&gt;Load More Posts...&lt;/div&gt; 
      &lt;/div&gt;&lt;!-- page --&gt;
  </code></pre>