jQuery tutorial for beginners - Calling live json web service using jquery ajax

5.0 (2)

25 learners

What you'll learn

This course includes

22.5 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

jquery ajax tutorial jquery ajax tutorial for beginners jquery ajax web service call json jquery call json web service jquery call json service jquery tutorial for beginners

Full Transcript

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/calling-live-json-web-service-using.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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. 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'); resultElement.html(''); 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>