社区首页 >问答首页 >我想要显示我从这个want获取的结果(https://openweathermap.org/current)，但是当我输入城市名称时，我没有得到响应

问我想要显示我从这个want获取的结果(https://openweathermap.org/current)，但是当我输入城市名称时，我没有得到响应
EN

Stack Overflow用户

提问于 2021-08-07 12:12:25

回答 1查看 22关注 0票数 0

我想显示从这个接口(https://openweathermap.org/current)获取的结果，但是当我输入城市名称时，没有得到响应。我不知道错误发生在哪里。

此接口将获取城市的名称并获取天气详细信息，这里我只对显示天气(weather.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" width="85" alt="image not available"/>
            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.");
}

javascript

html

jquery

json

api

回答 1

Stack Overflow用户

发布于 2021-08-07 12:36:59

Hi @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"
  });