Javascript 使用开放天气图API的Ajax天气网站不返回数据

我想建立一个网站，如果我输入一个城市名称，我可以看到温度。这是我的代码，但由于某些原因它不工作！请帮忙

首先我将显示JavaScript代码，然后我将显示te HTML代码

$（文档）.ready（函数（）{
$（'#submitWeather'）。单击（函数（）{
var city=$（“#city”）.val（）；
如果（城市！=''）{
$.ajax({
网址：'https://api.openweathermap.org/data/2.5/weather?q=“+city+”&units=metric“+”&APPID=xxx”，
键入：“获取”，
数据类型：“jsonp”，
成功：功能（数据）{
var widget=show（数据）；
$（“#show”）.html（小部件）；
$（“#城市”）.val（“”）；
}
});
}否则{
$（“#error”）.html（'字段不能为空'）；
}
});
});
功能显示（数据）{
返回“Weather：”+data.main[0].temp+“”
}

输入城市名称
搜索城市

在show函数中，它尝试获取

数据.main[0].temp

。OpenWeatherMapAPI没有将主字段指定为数组，它只是一个对象。因此，请删除

[0]

部分，因为它不是数组，只是一个对象。
您还将密钥放入代码中，因此可能需要重置它。

---

此外，您尝试选择名称为

city

的输入框，但实际上您选择的是ID为

city

的输入框，该输入框不存在。在输入元素上添加一个名为

id

的属性，该属性的值为show函数中的

city

，它尝试获取

数据.main[0].temp

。OpenWeatherMapAPI没有将主字段指定为数组，它只是一个对象。因此，请删除

[0]

部分，因为它不是数组，只是一个对象。
您还将密钥放入代码中，因此可能需要重置它。

---

此外，您尝试选择名称为

city

的输入框，但实际上您选择的是ID为

city

的输入框，该输入框不存在。在输入元素上添加一个名为

id

的属性，该属性的值为

city

除了删除

[0]

之外，还需要将

id='city'

分配给输入。您正在使用jquery

$（“#city”）.val（）

，该函数未定义。我在codepen中运行测试，并使其正常工作

除了删除

[0]

之外，还需要将

id='city'

分配给输入。您正在使用jquery

$（“#city”）.val（）

，该函数未定义。我在codepen中运行测试，并使其正常工作

我已将您的代码示例减少到最低限度。请发布简化的代码示例，以保持问题的美观和可管理性。例如，引导与您的问题没有直接联系，请删除所有引导引用。另外，不要发布你的API密钥，它们是私有的。我已经将你的代码样本减少到最小。请发布简化的代码示例，以保持问题的美观和可管理性。例如，引导与您的问题没有直接联系，请删除所有引导引用。另外，不要发布你的API密钥，它们是私有的。非常感谢！这就是我需要它的方式，它似乎在代码笔中工作，但不在我的文件中。。。我准确地抄写了，现在检查了几次。我通过在我的google chrome浏览器中以index.html打开html文件来测试网站。有什么想法吗？@JamesMiller（我的答案是第一个）我把所有东西从代码笔复制到了磁盘上，然后用chrome打开index.html文件，效果很好。打开JS控制台，然后在文本框中输入一个城市，按下搜索城市按钮，在控制台中查找任何错误。如果它说的是404错误，那么这个城市就不存在了。我在输入“Paris”时得到了这个信息，例如：weather.js:9 Uncaught TypeError:$。ajax不是HtmlButtoneElement的函数。（weather.js:9）在HTMLButtonElement.dispatch（jquery-3.2.1.slim.min.js:3）在HTMLButtonElement.q.handle（jquery-3.2.1.slim.min.js:3）@JamesMiller您需要使用脚本导入jquerytag@JamesMiller我指的是来自web的jquery.js文件，瘦jquery版本没有

$。ajax

非常感谢！这就是我需要它的方式，它似乎在代码笔中工作，但不在我的文件中。。。我准确地抄写了，现在检查了几次。我通过在我的google chrome浏览器中以index.html打开html文件来测试网站。有什么想法吗？@JamesMiller（我的答案是第一个）我把所有东西从代码笔复制到了磁盘上，然后用chrome打开index.html文件，效果很好。打开JS控制台，然后在文本框中输入一个城市，按下搜索城市按钮，在控制台中查找任何错误。如果它说的是404错误，那么这个城市就不存在了。我在输入“Paris”时得到了这个信息，例如：weather.js:9 Uncaught TypeError:$。ajax不是HtmlButtoneElement的函数。（weather.js:9）在HTMLButtonElement.dispatch（jquery-3.2.1.slim.min.js:3）在HTMLButtonElement.q.handle（jquery-3.2.1.slim.min.js:3）@JamesMiller您需要使用脚本导入jquerytag@JamesMiller我指的是来自web的jquery.js文件，瘦jquery版本没有

$.ajax