JavaScript/jQuery：CodePen内でIPジオロケーションAPIを設定する

Question

私はAPIを使い始めたばかりで、GETリクエストをIP Geolocation APIにするのが難しいです。問題が自分のコードにあるのか、CodePenに関するものであるのかは分かりません（おそらく私のコードです）。

IP Geolocation APIページに掲載されている例から直接JavaScriptを受け取りました。私はそれが動作しているのを見た後にそれを修正しようとしていましたが、それはまったく動作しませんでした。私はhttp://とhttps://の両方を含めるようにURLを修正しようとしました。

はJavaScript：

$(document).ready(function() { 

    $.getJSON("http://ip-api.com/json/?callback=?", function(data) { 
      var table_body = ""; 
      $.each(data, function(k, v) { 
       table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>"; 
      }); 
      $("#GeoResults").html(table_body); 
     }); 

}); 

HTML：

<div class="weather"> 
    <div class="row title"> 
    <h1>weather</h2> 
    </div> 
    <div class="row icon"> 

    </div> 
    <div id = "GeoResults" class="row temp"> 
    <p class = "city">City here</p> 
    </div> 
</div> 

URL私CodePenへ：http://ip-api.com/docs/api:json

Answer 1

Codepenはしたくない。私が使用しようとしていますhttps://codepen.io/mattr8/pen/yXEMRM

API httpsのためにip-api.comで作業してください。 codepenはhttps経由で提供されるため、httpsでない要求はブロックされます。 http://ip-api.com/json/?callback=に行くと？あなたが到達しようとしている情報が表示されます。 https://ip-api.com/json/?callback=に行くと？エラーが表示されます。

リンク先のjsbinの例ではhttpsを使用していないため、正常に動作します。

この問題を解決するには、要求に対してhttpsではなくhttpを使用して、サービスまたは自分のマシンでサンプルを作成します。