jQuery Ajax Method – Send Requests & Get Response


The guide explains how you can use the jQuery Ajax Method to send any type of API requests like GET, POST, PUT or DELETE from a webpage to get a response.

The jQuery Ajax method has been extensively used worldwide in every other web application or a website that is dependent on APIs and dynamic client-server communication. AJAX (Asynchronous HTTP Request) basically allows us to dynamically change the content of a webpage without the need of reloading it.

The default plain JavaScript AJAX code is pretty difficult for anybody to learn and is lengthy as well. Therefore jQuery brings in a great and handy AJAX method that allows anybody to send any kind of AJAX requests and can do further whatsoever they want to do with the response so received.

Managing RESTFUL APIs to perform CRUD operations is the popular use case of jQuery AJAX. In CRUD APIs, we basically perform the four operations Create, Read, Update and Delete with corresponding API methods. GET, POST, PUT and DELETE methods are used respectively for Reading, Creating, Updating and Deletion purposes. The GET method is highly used to retrieve data from somewhere and the POST method is extensively used for performing operations on data. In this tutorial, I have demonstrated how you can send GET, POST, PUT and DELETE requests with jQuery AJAX method.

Note. Make sure you include the full jQuery Script file from a CDN or you can directly download it from the official website and then can include it locally on the webpage.

jQuery AJAX Syntax

The basic syntax of jQuery AJAX is written below.

$.ajax({property:value, property:value, ... });

I’ll try to help you make use of this function in a very easy way. Try to grasp each line one by one as defined below. Whenever you have to make use of this function write this way.

This way the jQuery function will never seem to be complex to you.

Simplest jQuery AJAX Request

To send the most basic AJAX request with this function in which you don’t get any response, you only need to write one property and that is the url property. I’ve provided the complete HTML code to send an AJAX request with the jQuery AJAX method without getting any response.

The above code will basically send a GET Request using AJAX on the button click which is labeled as Perform AJAX Request. To verify if it sends the GET request or not, you can simply go to the Network tab of your Chrome Developer Tools.

JQuery Basic AJAX Example

Use the shortcut key F12 or Ctrl + Shift + I open Chrome Developer Tools, switch to Network tab and then click on the AJAX request button and you’ll immediately see an entry in the window as denoted by 3 in the above screenshot. This is basically the response of the request that we’ve just sent successfully with the jQuery AJAX method.

Handling the Response

In case you want to do anything with the response of the request, you’ve to use the success property in the $.ajax() method. The success parameter is basically returning a function that has the only argument for the response variable. Have a look at the following AJAX function.

In the above jQuery AJAX method, you can clearly see we’ve used the url property and success property. The success property has a function with the argument variable result defined as the value for the property. The result variable holds the response of the request sent to the URL set in the url property of the AJAX method.

Now, you can write whatsoever JavaScript or jQuery inside this function to execute when the request is successful with a valid response.

Note. The success function will only execute if the response is OK and returns a valid success response code like the 200 response code.

In case it returns an error response code like 404, the success function will not execute. To handle such cases, you need to define the error function. Similar to the success property, the error property in a jQuery AJAX method holds a function containing the response received when an error response code is returned.

The following code illustrates a proper jQuery AJAX response handling on successful and failed requests.

So far in this article, we’ve sent basic API requests that basically are GET requests. We’ve also handled their response but we’ve not sent any data along with our requests.

CRUD API Requests with jQuery AJAX Method

Now, we’ll send the requests using this jQuery AJAX with different methods namely GET, POST, PUT and DELETE. When we have to send CRUD API requests, we also need to send some data along with the request.

Sending Data With jQuery AJAX

Let’s figure out how we can send data along with with our AJAX requests using the $.ajax() method.

All we need to do is to use one more property, data.

Setting the Response Data Type & Request Headers or Content-Type

In the data property, you’ve to give a JavaScript Object as the value. This object is basically the collection of key-value pair based data as clearly illustrated in the above code.

Using another property, dataType you can tell what kind of response should be expected by it. For example, you can set the dataType to be text by adding the following line into the jQuery AJAX method.

dataType: "text"

This will tell the function to assume the response as a plain text string. By default, if you do not set this property, the browser automatically decides what data type it has to assume.

Some APIs also give a response only if you set a particular header along with the API request. $.ajax() function also allows you to set the header of the request using the contentType property as defined in the following line.

contentType: "application/json; charset=utf-8"

The above line of code will set the header according to the value defined in the double-quotes.

Setting the Request Method

This is the most important aspect of this article i.e. how to set the request method with the jQuery AJAX method. Again, it is very simple and all you need to do is to use the type property in the $.ajax() function.

type: "GET" or type: "POST" or type: "PUT" or type: "DELETE"

This way, we can conclude all of the above-explained properties into a proper jQuery AJAX method code as written below.

Note. In the above code, I’ve not used the contentType and the dataType properties because in most of the beginner level API requests they are not required. But you can always use them according to your requirements.

jQuery AJAX Example

The following code is an example in which we’re basically sending GET Request to a Live Forex Rates API. In this, we’re also sending the data. The data is basically the base currency code and currency code in which we want to check the conversion rates.

The above example is basically sending a GET request to a currency conversion API. This API requires two parameters the base currency and the currency to convert as the prerequisite data and returns the exchange rate. As the response, in this case, is a JSON object we’re accordingly traversing the right properties to be displayed in the alert box.

The following screenshot shows that the above code works perfectly. We’re basically executing the $.ajax() method on clicking the Send API Request button.

JQuery AJAX Example

I hope this article has helped you in learning the jQuery AJAX method. Do share it with others who might find this useful as well. Feel free to ask any kind of questions related to this article in the comments section.

Don’t forget to Subscribe To WTMatter!

Suggested Readings.

Subscribe To WTMatter!

Receive updates of our latest articles via email. Enter your email address below to get started.

Leave a Reply

Your email address will not be published. Required fields are marked *