2017-10-08 2 views
1

jQuery AJAX with jsonp 응답을 구현하는 데 문제가 있습니다. 액세스하려고하지만 실패한 콜백 함수가 호출됩니다. 내 성공 콜백 함수를 호출해야합니다.jsonp 응답으로 jQuery AJAX 구현

또한 일반 JavaScript에서는 이미 구현되었으며 jsonp 및 교차 도메인 아약스 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에이를 볼 수 있습니다.

도와주세요!

+0

실패한 콜백 오류 메시지를 게시 할 수 있습니까? –

+0

@SamDev localhost에서 jsonp 응답을 가져 오려고하는데이 오류가 발생합니다. 'jQuery31006235097177340809_1507490891841은 200로드가 없습니다.' – yogihosting

+0

데이터 유형으로 시도하십시오 : "json" –

답변

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가 안전하지 않은 아웃 바운드 요청을 할 수 없으므로 작업 예제를 바이올린에 넣어야했습니다.

+0

고맙습니다. 완벽하게 작동했습니다. jsonpCallback : 'processJSONPResponse'는 코드에서 누락 된 것입니다. – yogihosting