jsonp応答を使用したjQuery AJAXの実装

Question

jQuery AJAX with jsonp応答の実装に問題があります。私はそれにアクセスしようとしましたが、失敗したコールバック関数が呼び出されました。成功コールバック関数が呼び出されるようにしたい。

また、プレーンJavaScriptでは既に実装済みで、jsonpとクロスドメインajax fundasについて知っています。私が失敗しているjQuery上です。

JSONPの場所がある - here

コードは次のとおりです。

   $.ajax({ 
       url: "http://www.demo.yogihosting.com/jquery/jsonp/data1.json", 
       dataType: "jsonp", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function (result, status, xhr) { 
        alert(result); 
       }, 
       error: function (xhr, status, error) { 
        alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) 
       } 
      }); 

あなたはjQuery AJAX with jsonp on CodePenでこれを表示することができます。

助けてください！

Answer 1

はあなたが呼んでいるJSONP形式はprocessJSONPResponseのコールバックを持っているので、あなたのAJAXリクエストのjsonpCallbackパラメータでそれを設定する必要があります。

$(document).ready(function() { 
    $("#jsonpButton1").click(function(e) { 
    $.ajax({ 
     url: "http://www.demo.yogihosting.com/jquery/jsonp/data1.json", 
     dataType: "jsonp", 
     type: "POST", 
     jsonpCallback: 'processJSONPResponse', // add this property 
     contentType: "application/json; charset=utf-8", 
     success: function(result, status, xhr) { 
     console.log(result); 
     }, 
     error: function(xhr, status, error) { 
     console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText) 
     } 
    }); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<button id="jsonpButton1">Button 1</button> 

Working example

なお、I SOが安全でないアウトバウンド要求を行うことができないので、実例をフィドルに入れなければならなかった。