Ajax Call Example

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. 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. 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. 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.