我的天气API应用AJAX代码无法拉取数据，问题出在哪？

嘿，我帮你梳理了下你的AJAX代码，发现几个明显的问题，咱们一步步来修复：

主要问题点及修复方案 #

• 变量名不匹配：你定义的getID函数接收的参数是searchdata，但在AJAX请求的URL里却用了cityName——这个变量在getID函数里根本没定义，浏览器肯定会报错！把URL里的cityName换成searchdata就好。
• URL参数格式错误：
  • 你写的&&是HTML转义字符，直接写在JS里会被当成字符串的一部分，接口根本识别不了，得改成标准的&来分隔参数；
  • 另外q参数的格式是q=城市名,国家代码，修正变量后要确保这个参数格式正确。
• 多余的请求参数：你已经通过URL的q参数传递了城市名，AJAX配置里的data: { search: searchdata }完全是多余的，而且OpenWeatherMap的接口也不接受这个参数，直接删掉就行。
• JSONP的可选性：现在OpenWeatherMap的API已经支持CORS了，你可以直接用dataType: "json"，没必要用JSONP；当然如果你的开发环境有特殊跨域限制，JSONP也能凑合用，但优先推荐用JSON。

修正后的代码 #

$("#sl").click(function() { 
  var city = $("#cityName").val(); 
  console.log(city); 
  getID(city); 
});

function getID(searchdata) {
  $.ajax({
    // 用模板字符串写URL更清晰，也避免拼接错误
    url: `http://api.openweathermap.org/data/2.5/weather?q=${searchdata},ca&appid=76e0a92437b70a4f70ae9ddc7132491e`,
    dataType: "json",
    success: function(cityID) { 
      getinf(cityID); 
      console.log(cityID); 
    },
    // 加个错误回调，方便排查问题
    error: function(xhr, status, error) {
      console.log("请求出错啦：", status, error);
      console.log("服务器返回内容：", xhr.responseText);
    }
  })
}

额外排查建议 #

• 先确认你的API密钥是否有效，有没有在OpenWeatherMap的后台正确激活；
• 输入的城市名尽量用英文（OpenWeatherMap对中文城市名支持有限），拼写一定要准确；
• 打开浏览器开发者工具（按F12），切换到「Network」标签，看看请求的状态码：401代表密钥无效，404代表找不到对应城市，这些信息能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者Jay E