Jquery Ajax Tutorial

Posted on  by admin

One of the best features of jQuery AJAX Method is to load data from external website by calling APIs, and get the response in JSON or XML formats. In this example I will show you how easy it is to make such API calls in jQuery AJAX.

API Call with jQuery AJAX Method

The OpenWeatherMap API provides the complete weather information for any location on Earth including over 200,000 cities.

This API provides the response in JSON format. To make your API call, first create your Free Account in their website and get your API KEY.

Then use this KEY to make API calls with jQuery AJAX. The JSON returned by the OpenWeatherMap API is:.

Related Tutorial: Implementing TheMovieDB (TMDB) API with jQuery AJAX. In my application there is a HTML Select control and a button.

OpenWeatherMap API

The Select control contains the city names of New York, San Francisco, London, Mumbai & Santa Lucia.

When a user selects any city and presses the button, then the button click event will call the OpenWeatherMap API (using jQuery AJAX Method) and shows the weather information of that city.

The below image shows the New York city weather fetched from the API and displayed on the HTML page:.

Note – The loading.gif is a gif image that will be shown during AJAX calls while the message div will show the weather information of the selected city.

CSS to style the HTML elements. The jQuery Code:.

Note – On the button click event I first did some validation by telling the user to select a city before they press the button. Then the jQuery AJAX method calls the OpenWeatherMap API by passing the CITY ID and API KEY.

jQuery.get( url [, data ] [, success ] [, dataType ] )Returns: jqXHR

There are many uses of .ajax() method like uploading files asynchronously.

To know more kindly check this tutorial – How to Upload Multiple files using jQuery AJAX in ASP.NET MVC.

The API returns the city’s weather in a JSON format which is converted into a HTML table form and shown inside the div called message.


And that’s all, you can check link for downloading the codes:. In this way you can call any API to fetch data from jQuery AJAX method.

It is not only very simply but powerful enough to make interactive features in your websites.

Additional Notes:

Do you have any question? Loading spinners are awesome, and there are a lot of them available from a variety of sources. One of these is loading.io, a service that helps you create loading animations with icons, GIF’s, SVG’s and even backgrounds.

If you’ve ever or are currently working with a highly-dynamic data analysis web project, then you will of come to know that requesting data via AJAX is very common.

Now, rather than just have some simple ‘Loading’ message presented to the user when a button is clicked, for instance, we can show something much nicer, a spinner.

In this tutorial, we will add one of the loading.io icon spinners to an ajax call, so that the user can visually see that the process is happening during a request.

First of all, let’s pick a spinner, I chose the one below –.

See the Pen Loading.io Spinner by Danny Englishby (@DanEnglishby) on CodePen.default.

These spinners are EXTREMELY easy to set up, all you need to do is copy the provided CSS into your stylesheet and copy the HTML tag provided into your HTML, that is it!