Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Calling live json web service using jquery ajax

Suggested Videos
Part 68 - How to call wcf service using jquery
Part 69 - Difference between window height and document height
Part 70 - Load data on page scroll using jquery



In this video we will discuss how to call a live weather web service that returns JSON data using jquery ajax.



For the purpose of this demo, we will be using the live weather web service that returns JSON data. The web service can be found at the following URL.
http://openweathermap.org/current

We want to retrieve weather data from the web service and display it on a web page as shown below.

1

Here is the HTML and jQuery code used in the demo

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnGetWeather').click(function () {
                var resultElement = $('#resultDiv');

                var requestData = $('#txtCity').val() + ',' + $('#txtCountry').val();
                $.ajax({
                    url: 'http://api.openweathermap.org/data/2.5/weather',
                    method: 'get',
                    data: { q: requestData },
                    dataType: 'json',
                    success: function (response) {
                        if (response.message != null) {
                            resultElement.html(response.message);
                        }
                        else {
                            resultElement.html('Weather: ' + response.weather[0].main + '<br/>'
                                + 'Description: ' + response.weather[0].description);
                        }
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>City</td>
            <td><input type="text" id="txtCity" /></td>
        </tr>
        <tr>
            <td>Country</td>
            <td><input type="text" id="txtCountry" /></td>
        </tr>
    </table>
    <input type="button" id="btnGetWeather" value="Get Weather Data">
    <br /><br />
    <div id="resultDiv">
    </div>
</body>
</html>

jQuery tutorial for beginners

5 comments:

  1. Hi. I was watiching your video in youtube, I tried to replicated the example in my computer, but I recived a message error from ajax and don't work. Could you give me any idea for try to fix my code. thanks.

    ReplyDelete
  2. No data is displayed no api call , while debugging i got to found , a 401 unauthorized error is throwing. Can you please help

    ReplyDelete
  3. data: { q: requestData, appid:'279398317b5b2ce08766828fb64d0e1c'},

    use that data property instead of data: { q: requestData},

    ReplyDelete
  4. WHERE DO i PUT THE API KEY IN THE CODE PLEASE?

    ReplyDelete
  5. data: { q: requestData, appid:'279398317b5b2ce08766828fb64d0e1c'},
    use this line. using instead of data: { q: requestData },

    ReplyDelete

It would be great if you can help share these free resources