OpenWeatherMapAPIを用いて都市名を検索すると天気を表示できるようにしたい

前提・実現したいこと

OpenWeatherMapを使って都市名を検索(テキストボックスに入力して検索ボタンを押す)するとその都市の天気を表示できるwebページを作りたいです。

テキストボックスに都市名(ローマ字)を入力し検索ボタンを押すと入力した文字が**https://openweathermap.org/find?q=**の後ろに付け足されAPIで取得した情報を表示できるようにしたいです。

発生している問題・エラーメッセージ

ネットで検索して自分なりに作ってみたものの、テキストボックスから都市名の文字を取得、そして取得した文字をOpenWeatherMapAPIのURLの一部に組み込むのがうまくいきません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>今日の天気</title>
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8  <script src="https://map.yahooapis.jp/js/V1/jsapi?appid=dj00aiZpPUVXZXJzQVJCVmdYayZzPWNvbnN1bWVyc2VjcmV0Jng9MDA-"
9    type="text/javascript"></script>
10  <script type="text/javascript" src="天気予報.js"></script>
11  <link rel="stylesheet" type="text/css" href="天気予報.css">
12  <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
13
14
15</head>
16
17<body>
18  <h1>weather</h1>
19  <h3>天気</h3>
20  <div>
21      <h2>都市の検索</h2>
22        <input type="text" id="cityradio" name="city">
23        <button id="submit">  Click</button>
24    </div> 
25    <div class="weatherMain"> 
26        <div class="weatherMain"> 
27            <h2>現在の天気は</h2>
28            <div><span id = "weather" class="bold"></span></div>
29            <div><span id = "weatherMark" class="bold"></span></div>
30            <p id="icon"></p>
31        </div>
32        <div>気温　<span id = "temp"  class="bold"></span>　℃</div>
33        <div>湿度　<span id = "humidity" class="bold"></span>　%</div>
34    </div>
35</html>

JavaScript
1
2    $(document).ready(function() {
3        $("#submit").click(function (e) {
4            //JSONデータ取得 日本語で天気名を表示したいのでlang=ja　として日本語表記データを取得
5            $.post("https://openweathermap.org/find?q=" + $("input[id='cityradio']").val() + "&appid=5de32357d8304f76acb3ecc4ed34554d&lang=ja&units=metric",  
6                function(json){
7                    $("#weather").html(json.weather[0].description);
8                    $("#humidity").html(json.main.humidity);
9                    //lang=jaにすることで華氏から摂氏に変換することなく摂氏表示となる。小数点だけ丸める処理をする
10                    $("#temp").html(Math.round(json.main.temp));
11                    //天気に応じた天気アイコンを表示させる
12                    switch (json.weather[0].main){
13                    case 'Clouds':
14                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/04d.png' >");
15                    break;
16                    case 'Snow':
17                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/13d.png' >");
18                    break;
19                    case 'Rain':
20                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/09d.png' >");
21                    break;
22                    case 'Clear':
23                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/01d.png' >");
24                    break;
25                    case 'Fog':
26                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50d.png' >");
27                    break;
28                    case 'Mist':
29                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50n.png' >");
30                    break;
31                    case 'Haze':
32                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/50d.png' >");
33                    break;
34                    default:
35                    $("#weatherMark").html("<img src='http://openweathermap.org/img/w/01n.png' >");
36                }
37             }
38        );
39    });
40});

試したこと

getElementedByIDやbutton.onclickなど自分が持っている知識はフルに活用したつもりですが、うまくいきません。

補足情報（FW/ツールのバージョンなど）

以下のサイトを参考にさせていただきました。
リンク内容

行動規範の内容に同意します

回答1件

ベストアンサー

下記のどちらかはいかがでしょうか？
一度お試しいただけると幸いです。

js
1$.post("https://openweathermap.org/find?q=" + $('input[name="city"]').val() + "&appid=5de32357d8304f76acb3ecc4ed34554d&lang=ja&units=metric",
2
3or 
4
5$.post("https://openweathermap.org/find?q=" + $('#cityradio').val() + "&appid=5de32357d8304f76acb3ecc4ed34554d&lang=ja&units=metric",
6

追記

URLが間違っていました。
APIの際に使用するのは、http://api.openweathermap.org/data/2.5/forecast/こちらのURLなのでリクエストをこちらに送ると返ってくると思います。
ただ、レスポンスの形式も異なると思うので、コードの修正は必要そうです。

こちらを参考に修正してみてはいかがでしょうか！
https://openweathermap.org/api

投稿2019/06/22 08:21

編集2019/06/23 02:16

fumito_94

総合スコア679

Kota1

2019/06/22 20:01

ご回答ありがとうございます。ご回答していただいたように試してみたのですが、できませんでした・・・。

fumito_94

2019/06/23 02:12 編集

調べてみたところ、そもそものAPIのURLが違いそうです。 URLが違うため、access-control-allow-originというエラーに引っかかっていたみたいです（console上で確認できます！） http://api.openweathermap.org/data/2.5/forecast/ こちらを使用してみてください！APIではこちらをしようするようになっているみたいです。その場合、レスポンスの形式も異なるのでコードの変更は必要です。一応回答も修正しておきます！

行動規範の内容に同意します