jquery jsonpとコールバックの仕組みを理解する

Question

私は、ローカルマシンで動作するdataType：jsonを使用してgithubにajax呼び出しを書きましたが、クロスドメインの問題に対処するためにdataType：jsonPを使用する必要があるようです。だから誰も私が必要な変更を行うのを助けることができます。 （ところでgithubのはJSONPデータ型をサポートするように見える - https://github.com/pgxn/pgxn-api/wiki/JSONP）

$.ajax({ 
    url: "https://api.github.com/repos/jeffreycwitt/prollecture1/tags", 
    dataType: "jsonp", 
    crossDomain: true, 
    success: function(returndata) { 
     if (returndata.length === 0) { 
      $("#versionBox").remove(); 
     } 
     else if (returndata.length === 1) { 
      $("#versionBox").remove(); 
     } 
     else { 
      $.each(returndata, function() { 
       $("#versionBox").show(); 
       var tag = this["name"]; 
       console.log(tag); 
       var currentVersion = $("#editionNumber").text(); 
       if (tag.substring(1) === currentVersion) { 
        tag = tag + " (Current Version)"; 
       } 
       var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag; 
       $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>"); 
      }); 

     } 
    } 
}); 

私はちょうどdataTypeとJSONを使用しているが、そのJSONPで働いていなかったとき、これは働いていた言ったように。私は印象の下にgithubコールバックに追加されたコールバックパラメータによって指定された何かに包まれた通常のjsonを返信します?callback=?。 （このパラメータは、データ型はJSONPに変更されjqueryのことで自動的に追加される。をだから私は何とかラッパーを解析するために私の成功の機能を変更する必要がありますか？

Answer 1

あなたのコードは、このlive demoに見られるように動作するようです。

あなたが持っている問題は、あなたが returndataオブジェクトと、そのようなプロパティが存在しない上.lengthプロパティにアクセスしようとしているということです。

{ 
    "data": [ 
     { 
      "tarball_url": "https://github.com/jeffreycwitt/prollecture1/tarball/v0.2", 
      "commit": { 
       "sha": "46a8aea57cd095a603f194f83cd4a18adcb35908", 
       "url": "https://api.github.com/repos/jeffreycwitt/prollecture1/commits/46a8aea57cd095a603f194f83cd4a18adcb35908" 
      }, 
      "name": "v0.2", 
      "zipball_url": "https://github.com/jeffreycwitt/prollecture1/zipball/v0.2" 
     } 
    ], 
    "meta": { 
     "status": 200, 
     "X-RateLimit-Limit": "5000", 
     "X-RateLimit-Remaining": "4993" 
    } 
} 

私はあなたがを意味推測dataプロパティが配列であるためです。だから、

：

var data = returndata.data; 
if (data.length === 0) { 
    $("#versionBox").remove(); 
} 
else if (data.length === 1) { 
    $("#versionBox").remove(); 
} 
else { 
    $.each(data, function() { 
     $("#versionBox").show(); 
     var tag = this["name"]; 
     console.log(tag); 
     var currentVersion = $("#editionNumber").text(); 
     if (tag.substring(1) === currentVersion) { 
      tag = tag + " (Current Version)"; 
     } 
     var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag; 
     $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>"); 
    }); 
} 

Answer 2

答え（GitHubのに固有の、私は推測する）、通常のJSON呼び出しに含まれていないデータの追加の層を介して自分の道を見つけることにあります。

ここでコードがどのように変更されましたか。 3つの具体的な点で、returndataをreturndata.dataに変更しました。

$.ajax({ 
url: "https://api.github.com/repos/jeffreycwitt/prollecture1/tags", 
dataType: "jsonp", 
crossDomain: true, 
success: function(returndata) { 
    if (returndata.data[0].length === 0) { 
     $("#versionBox").remove(); 
    } 
    else if (returndata.data[0].length === 1) { 
     $("#versionBox").remove(); 
    } 
    else { 
     $.each(returndata.data, function() { 
      $("#versionBox").show(); 
      var tag = this.name; 
      console.log(tag); 
      var currentVersion = $("#editionNumber").text(); 
      if (tag.substring(1) === currentVersion) { 
       tag = tag + " (Current Version)"; 
      } 
      var linkname = "textdisplay.php?flag=<?php echo $fs; ?>&ed=" + tag; 
      $('#versionSubBox').append("<p><a href='" + linkname + "'>View Version: " + tag + "</a></p>"); 
     }); 

    } 
} 
});