如何使用jQuery从AJAX请求中获取响应文本

Question

I am trying to make a JSONP request to a server. This is my code:

$.ajax({
  type: 'GET',
  url: myURL,
  async: false,
  crossDomain: true,
  dataType: 'jsonp',
  jsonpCallback: 'jsonCallback',
  headers: { 
    'Accept': 'application/json', //this is required by the server
    'key': key   
  },
  success: function() {
    alert('1');
  },
  error: function() {
    alert('2');
  },
  complete: function(){
    alert('3');
  }
});//code indentation

When I run the code it errors. But if I open the developers tools in Chrome (ctrl+shift+I) I can see the request under "network". Clicking on it shows the correct response (and shows the request was accepted).

Apologies is there is a really obvious solution (I have tried searching, but with no luck), but at this point I am well and truly baffled. Any help would be really appreciated.

::EDIT::

changing the error function to:

error: function() {
  console.log('error', arguments);
},

returned the message "jsonCallback was not called" Thanks to Aaron Digulla below.

The response from the server is JSON, not JSONP (checked with JSONlint)

Answer 1

When you say "it errors", my guess is that you get alert(2) . To find out why, log the function arguments to the console:

...
error: function() {
    console.log('error', arguments);
},
...

jQuery will pass additional information (like the error message) to the function. That should help you understand why it fails.

The same is true for the success function which gets the server response, for example.

[EDIT]

I get the error jsonCallback was not called

That means your server isn't returning JSONP. JSONP looks like name({...}) while normal JSON looks like {...} . Please check your server's configuration and make sure it actually supports JSONP and that the response looks correct.

I should have seen this from your code:

dataType: 'jsonp'
headers: { 
    'Accept': 'application/json', //this is required by the server
}

That means you're sending a JSONP/JSON mix which can't work. If you use a certain dataType , then let jQuery build the correct headers.

Answer 2

The success function has argument and from that argument you can get the response text.

$.ajax({
  type: 'GET',
  url: myURL,
  async: false,
  crossDomain: true,
  dataType: 'jsonp',
  jsonpCallback: 'jsonCallback',
  headers: { 
    'Accept': 'application/json', //this is required by the server
    'key': key 
  },
  success: function(response) {
    alert(response);
    alert('1');
  },
  error: function() {
    alert('2');
  },
  complete: function(){
    alert('3');
  }
});

Answer 3

您无法为jsonp请求设置async: false ，因为其性质如此，因此添加了脚本标记以处理响应方法。

Answer 4

 dataType: 'jsonp

如您所述，您希望从服务器返回的数据类型为jsonp，但可能是您的服务器将返回任何其他格式，而不是jsonp ..因此，请在浏览器的“网络”下检查服务器返回的响应类型控制台...如果不是jsonp格式，请更改您的响应返回类型...。