来自wordpress脚本的jquery Ajax GET jsonp请求答案

【问题标题】：jquery Ajax GET jsonp request from wordpress script来自wordpress脚本的jquery Ajax GET jsonp请求
【发布时间】：2014-08-24 08:58:38
【问题描述】：

我正在为 phonegap 应用程序构建一个脚本，我正在使用 jquery 和 ajax 从我的 wordpress 站点获取一些 json 并显示它。我的脚本没有显示任何内容，控制台也没有显示任何错误，所以也许其中一位专业人士可以帮助我：

列表页（HTML）：

<ul data-role="listview" id="post-list"></ul>

单页 (HTML)：

<ul data-role="listview" id="post-data"></ul>

JavaScript：

 $(document).on('pageinit', '#home', function () {

     $.ajax({
         url: 'http://chris.floppytron.com/api/get_recent_posts/',
         dataType: "jsonp",
         success: function (result) {
             ajax.parseJSONP(result);
         },
         error: function (request, error) {
             alert('Network error has occurred please try again!');
         }
     });
 });

 $(document).on('pagebeforeshow', '#headline', function () {
     $('#post-data').empty();
     $.each(postInfo.result, function (i, row) {
         if (row.id == postInfo.id) {
             $('#post-data').append('<li>' + row.title + '</li>');
             $('#post-data').append('<li>' + row.date + '</li>');
             $('#post-data').append('<li>' + row.categories + '</li><br />');
             $('#post-data').append('<li>' + row.content + '</li>');
             $('#post-data').listview('refresh');
         }
     });
 });

 $(document).on('vclick', '#post-list li a', function () {
     postInfo.id = $(this).attr('data-id');
     $.mobile.changePage("#headline", {
         transition: "slide",
         changeHash: false
     });
 });

 var postInfo = {
     id: null,
     result: null
 }

 var ajax = {
     parseJSONP: function (result) {
         postInfo.result = result.results;
         $.each(result.results, function (i, row) {
             console.log(JSON.stringify(row));
             $('#post-list').append('<li><a href="" data-id="' + row.id + '"><img src="' + row.thumbnail + '"/><h3>' + row.title + '</h3><p>' + row.categories + '</p><br /><p>' + row.date + '</p></a></li>');
         });
         $('#post-list').listview('refresh');
     }
 }

【问题讨论】：

与 JSON 响应无关。 Here's your jsFiddle

标签： javascript jquery ajax wordpress cordova

【解决方案1】：

 <!doctype html>
 <html>
 <head>
 <meta charset="UTF-8">
<title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.3.0.min.css"/>
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script>

function onBodyLoad() 
{
document.addEventListener('deviceready', onDeviceReady);    
}

function onDeviceReady()
{
$("#btnSubmit").live('touchend',onSubmit);
 }

function onSubmit() {

var postData = $("form").serialize();

alert(postData);

$.ajax({
    type: 'POST',
    data: postData,
    url: 'http://www.nextflow.in.th/example/phonegap/post/post.php',
    success: function(data){
        alert(data);
        alert('Your comment was successfully added');
    },
    error: function(){

        alert('There was an error adding your comment');
    }
});

}

 <body onLoad="onBodyLoad()">
  <div data-role="page" id="page">
  <div data-role="header">
  <h1>Example</h1>
  </div>
  <div data-role="content">
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="nickname">Nick name: </label>
    <input type="text" id="nickname" name="nickname">
  </form>
  <a href="#" data-role="button" id="btnSubmit">Submit</a>
  <div id="result">
  </div>
  </div>
  <div data-role="footer">
  <h4>Nextflow.in.th</h4>
  </div>
  </div>
  </body>
  </html>

【讨论】：