用jsonp响应实现jQuery AJAX

Question

我在使用jsonp 响应实现 jQuery AJAX时出现问题。我尝试访问它，但调用了失败的回调函数。我希望我的成功回调函数被调用。

另请注意，在纯JavaScript上我已经实现了它，我知道jsonp和跨域ajax基金。它在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

请注意，我必须将工作示例放在小提琴中，因为SO不允许进行不安全的出站请求。