How to Use jQuery Post Method to Call OpenWeatherMap API?

• DEMO
• Download source code

Introduction

With jQuery Post method, you can make calls to any API and Web Service easily. In this tutorial, I will teach you how to make an API call using this method.

I chose the OpenWeatherMap API to illustrate the codes to you. To tell you more about the OpenWeatherMapAPI – It is a very popular and a free weather API, that provides weather information for all the cities on earth.

Background

Before making the API call, you should create your free account at OpenWeatherMap and get your API Key. You will use this API Key to make the calls.

OpenWeatherMap API URL

Typically, we make the API call to this URL: 

http://api.openweathermap.org/data/2.5/weather?id=CITYIDappid=APIKEY&units=metric

Here, we pass the CITYID and the APIKEY to this URL.

OpenWeatherMap JSON

The API returns the response in a JSON format. This JSON contains the weather information of the city. The OpenWeatherMap JSON looks like:

{
"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds",
"description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,
"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200
}

Page HTML

MyHTML page contains 5 radio buttons for 5 cities – Melbourne, Auckland, New Delhi, Abu Dhabi and Lahore.

There is a button, which on clicking, will call the OpenWeatherMap API with jQuery .post() method. Finally, the weather of the city is shown in the div element.

The below 2 images show the weather report of 2 major cities of this planet:

Abu Dhabi Weather Report

Melbourne Weather Report

This is the HTML of my page:

<div class="container">
    <div id="apiDiv">
        <h4>Select the City for Weather Report</h4>
        <span><input type="radio" id="cityRadio" 
        name="cityRadio" value="7839805">Melbourne</span>
        <span><input type="radio" id="cityRadio" 
        name="cityRadio" value="2193734">Auckland</span>
        <span><input type="radio" id="cityRadio" 
        name="cityRadio" value="1261481">New Delhi</span>
        <span><input type="radio" id="cityRadio" 
        name="cityRadio" value="292968">Abu Dhabi</span>
        <span><input type="radio" id="cityRadio" 
        name="cityRadio" value="1172451">Lahore</span>
        <button id="submit">Submit</button>
        <div class="textAlignCenter">
            <img src="loading.gif" />
        </div>
        <div id="message"></div>
    </div>
</div>

Note: I will show the loading image (a .gif image) during AJAX calls.

Page CSS

Add the below CSS to make the HTML page look appealing:

<style>
    body {
        background: #111 no-repeat;
        background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
    }

    h1, h2, h3 {
        text-align: center;
        color: #FFF;
        margin: 5px 0;
    }

    h1 {
        font-size: 30px;
    }

    h2 a {
        font-size: 25px;
        color: #0184e3;
        text-decoration: none;
    }

    h3 {
        font-size: 23px;
        border-bottom: solid 3px #CCC;
        padding-bottom: 10px;
    }

        h3 a {
            color: #00e8ff;
            text-decoration: none;
        }

            h3 a:hover, h2 a:hover {
                text-decoration: underline;
            }

    .container {
        width: 800px;
        margin: auto;
        color: #FFF;
        font-size: 25px;
    }

        .container #content {
            border: dashed 2px #CCC;
            padding: 10px;
        }

    #reset {
        padding: 5px 10px;
        background: #4CAF50;
        border: none;
        color: #FFF;
        cursor: pointer;
    }

        #reset:hover {
            color: #4CAF50;
            background: #FFF;
        }

#apiDiv {
    padding-left: 20px;
}

    #apiDiv select, #apiDiv button {
        font-size: 25px;
    }

    #apiDiv h4 {
        margin: 10px 0;
    }

        #apiDiv .textAlignCenter {
            text-align: center;
        }

            #apiDiv .textAlignCenter img {
                display: none;
                width: 100px;
            }

        #apiDiv #message table {
            width: 100%;
            border: double 1px #00ffff;
            background: #ff6a00;
        }

            #apiDiv #message table th {
                text-align: left;
                background: #4CAF50;
            }
</style>

Adding the jQuery Reference

Place the jQuery reference just below the ending body tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

The jQuery Code

This jQuery code is the brain here, and communicates with the API to fetch the weather of the city. Add it just below where you refer the jQuery.

<script>
    $(document).ready(function () {
        $("input[id='cityRadio']").change(function () {
            $(this).parents("#apiDiv").find
            ("span").css("background", "none");
            $(this).parent().css("background", "#4CAF50");
        });

        $("#submit").click(function (e) {
            var validate = Validate();
            $("#message").html(validate);
            if (validate.length == 0) {
                $.post("http://api.openweathermap.org/data/2.5/weather?id=" + 
                $("input[id='cityRadio']:checked").val() + 
                "&appid=API-KEY&units=metric",
                function (result, status, xhr) {
                    var table = $("<table><tr>
                    <th>Weather Description</th></tr>");

                    table.append("<tr><td>City:</td>
                    <td>" + result["name"] + "</td></tr>");
                    table.append("<tr><td>Country:</td>
                    <td>" + result["sys"]["country"] + 
                    "</td></tr>");
                    table.append("<tr><td>Wind:</td>
                    <td>" + result["wind"]["speed"] + 
                    "Km/h</td></tr>");
                    table.append("<tr><td>Current Temperature:</td>
                    <td>" + result["main"]["temp"] + 
                    " °C</td></tr>");
                    table.append("<tr><td>Humidity:</td><td>" + 
                    result["main"]["humidity"] + "</td></tr>");
                    table.append("<tr><td>Weather:</td><td>" + 
                    result["weather"][0]["description"] + 
                    "</td></tr>");

                    $("#message").html(table);
                }
                ).fail(function (xhr, status, error) {
                    alert("Result: " + status + " " + error + " " + 
                    xhr.status + " " + xhr.statusText);
                });
            }
        });

        $(document).ajaxStart(function () {
            $("img").show();
        });

        $(document).ajaxStop(function () {
            $("img").hide();
        });

        function Validate() {
            var errorMessage = "";
            if ($("input[id='cityRadio']").is(":checked") == false) {
                errorMessage += "? Select City";
            }
            return errorMessage;
        }
    });
</script>

Explanation: In the button click event, first I validate the radio button, so that the user is forced to select a radio button, before clicking the button. The Validate() function does that job for me.

Then I call the API using jQuery .post() method. I passed the City Id and API Key to the API URL.

You can check the API URL in the code where I have given:

$("input[id='cityRadio']:checked").val()

This code provides the value of the radio button which is checked, i.e., the City Id in our case.

The success function of the jQuery Post method gets the weather of the city in JSON format. I extracted the city weather details from this JSON and show it in the HTML table form.

In the change event of the radio button:

$("input[id='cityRadio']").change(function () { });

I am providing the background color to the currently checked radio button.

I created the same application in ASP.NET MVC. Do check this article too - OpenWeatherMap API in ASP.NET MVC. 

Conclusion

I hope you enjoyed this tutorial. Please let me know if you have any questions in your mind. Also, do follow me and get updated when I publish new web development tutorials. 

Thank you for reading!