javascript - 为什么传递数据对象时第一个 $.ajax 会出错？

Question

我不确定为什么第一个 $.ajax() 错误。我正在尝试将 url 参数作为 ajax 数据属性的一部分传递。

这是一个 fiddle ，可以看到第一个ajax调用失败而第二个调用成功:http://jsfiddle.net/f9e5Y/

这是 JavaScript:

var urlParameters = {
  page: 1,
  api_key:'...',
  tags: 'kittens',
  method: 'flickr.photos.search',
  per_page: 3,
  format: 'json',
  jsoncallback: '?'
};

$.ajax({
  url: 'http://api.flickr.com/services/rest',
  type: 'GET',
  dataType: 'json',
  data: urlParameters,
  success: function (data) {
    console.log('ajax 1 - success');
    console.log('data');
  },
  error: function () {
    console.log('ajax 1 - error');   
  }
});

$.ajax({
  url: 'http://api.flickr.com/services/rest/?page=1&api_key=...&tags=kitten&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?',
  type: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log('ajax 2 - success');
    console.log(data);
  },
  error: function () {
    console.log('ajax 2 - error');   
  }
});

Answer 1

我假设 jQuery 仅扫描原始 URL 中的 callback=? 模式，以生成并插入随机函数名称，而不是从 data 构建的 URL。

因此，您实际上要查找的是 data: 'jsonp' 并通过 jsonp: 'jsoncallback' 设置回调参数 name:

var urlParameters = {
  page: 1,
  api_key: '...',
  tags: 'kittens',
  method: 'flickr.photos.search',
  per_page: 3,
  format: 'json'
};

$.ajax({
  url: 'http://api.flickr.com/services/rest',
  type: 'GET',
  dataType: 'jsonp',
  data: urlParameters,
  jsonp: 'jsoncallback',
  success: function (data) {
    console.log('ajax 1 - success');
    console.log('data');
  },
  error: function () {
    console.log('ajax 1 - error');   
  }
});