我想显示从这个天气 API（https://openweathermap.org/current）获取的结果，但是当我输入城市名称时，我没有得到任何响应
Posted
技术标签:
【中文标题】我想显示从这个天气 API（https://openweathermap.org/current）获取的结果，但是当我输入城市名称时，我没有得到任何响应【英文标题】：I want to display the result that I fetched from this weather API(https://openweathermap.org/current) but when i type the city name i get no response 【发布时间】：2021-10-12 04:29:22 【问题描述】：我想显示从这个 API (https://openweathermap.org/current) 获取的结果，但是当我输入城市名称时，我没有得到任何响应。我无法弄清楚错误发生在哪里。
这个 api 获取城市名称并获取天气详细信息，这里我只对显示天气 (weather[0].main) 和温度 (main.temp) 感兴趣。
结果会显示在
id 为 "result" 的标签。
这是我的代码，
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Weather</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="image_prev_ui.png" />
myProject
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="quote.html">Motivationl Quotes</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="weather.html">Weather</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-5">
<div class="jumbotron jumbotron-fluid mt-5">
<div class="text-center text-white mt-5">
<h1 class="display-4">Find Weather</h1>
<p class="lead"><em>Enter the name of any city for weather information</em></p>
<form id="forminput">
<input type="text" class="form-control text-center mt-5" id="city" placeholder="Example: Kolkata">
<button class="btn btn-outline-light btn-lg mt-5" type="submit">Submit</button>
</form>
<p id="result" class="text-white text-center fst-italic mt-5"></p>
</div>
</div>
</div>
<footer class="bg-dark text-center text-lg-start">
<div class="text-center text-white p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2021 Copyright:
<a class="text-muted" href="index.html">myProject.com</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
这里是 js jquery
$(document).ready(funtion()
$("#forminput").submit(function(event)
performSearch(event);
);
);
function performSearch(event)
var request;
event.preventDefault();
request = $.ajax(
url :'https://api.openweathermap.org/data/2.5/weather',
type : "GET",
data :
q : $("#city").val(),
appid : '2c476e538ecec946a44e8cc19a3effde',
units : 'metric'
);
request.done(function(response)
formatSearch(response);
);
function formatSearch(jsonObject)
var city_name = jsonObject.name;
var city_weather = jsonObject.weather[0].main;
var city_temp = jsonObject.main.temp;
$("#result").text("Weather now in "+city_name+" is "+city_weather+" and the temperature is "+city_temp+" Celcius.");
【问题讨论】：
【参考方案1】：嗨@Abhishek 你能尝试像这样发送你的请求吗
let url = `https://api.openweathermap.org/data/2.5/weather?q=$$("#city").val()&appid=2c476e538ecec946a44e8cc19a3effde&units=metric`;
let request = $.ajax(
url :url,
type : "GET"
);
【讨论】：
以上是关于我想显示从这个天气 API（https://openweathermap.org/current）获取的结果，但是当我输入城市名称时，我没有得到任何响应的主要内容，如果未能解决你的问题，请参考以下文章
地理位置始终显示莫斯科 Javascript/JQuery/JSON（开放天气 API）