为何调用MediaWiki API始终返回相同内容？

你正在尝试通过AJAX从Wikimedia Commons拉取和"California"相关的图片对吧？看了你给出的代码片段，我发现几个小问题，调整后就能正常请求啦：

原代码的问题点 #

• 你定义的url_wiki已经拼接了完整的API参数，但在$.ajax的data选项里又重复传了action和format，这会导致参数冲突，API可能无法正确解析请求。
• URL里加了callback=?（这是JSONP跨域请求的标识），但你把dataType设成了json，两者不匹配，会导致请求失败。

修正后的完整代码 #

// 只保留API基础地址，参数统一放到data里管理
var url_wiki = "https://commons.wikimedia.org/w/api.php";

$.ajax({
  type: 'GET',
  url: url_wiki,
  data: {
    action: 'query',
    titles: 'California',
    list: 'allimages',
    ailimit: 10,
    format: 'json'
  },
  dataType: 'jsonp', // 跨域请求必须用jsonp，MediaWiki API支持这种方式
  success: function(response) {
    // 成功拿到数据后的处理逻辑
    if (response.query && response.query.allimages) {
      const images = response.query.allimages;
      images.forEach(img => {
        console.log(`图片标题：${img.title}`);
        console.log(`图片地址：${img.url}`);
        // 要是想把图片显示在页面上，可以这么写：
        // document.body.insertAdjacentHTML('beforeend', `<img src="${img.url}" alt="${img.title}" style="max-width: 200px; margin: 10px;">`);
      });
    } else {
      console.log("没找到和California相关的图片哦");
    }
  },
  error: function(xhr, status, err) {
    console.error("请求出错啦：", status, err);
  }
});

关键调整说明 #

1. 参数统一管理：把所有API参数都放到data选项里，比直接拼接URL更清晰，也不容易出错。
2. 跨域适配：因为你的页面大概率不是在Wikimedia Commons域名下，所以必须用jsonp作为dataType来绕过同源策略限制。
3. 完善回调逻辑：增加了成功和失败的回调，方便你处理返回的图片数据，也能快速排查请求失败的原因。

内容的提问来源于stack exchange，提问作者George Marti