jQuery AJAX Request Methods

jQuery AJAX Request Methods

jQuery provides several AJAX methods to request data from the server without reloading the page. These methods simplify GET, POST, and full AJAX interactions in JavaScript. Whether you need to fetch plain data, submit a form, or load HTML content into the DOM, jQuery’s AJAX methods offer convenient and powerful options to handle all types of asynchronous requests.

jQuery Request Methods

1. $.ajax() – The base method that all other shorthand methods are built upon.
2. $.get() – A simplified form of $.ajax() specifically for GET requests.
3. $.post() – A shorthand for sending POST requests using $.ajax().
4. load() – A convenience method that combines a GET request with direct DOM content insertion.

jQuery AJAX $.ajax() Request Method

The jQuery $.ajax() method is the most powerful way to send asynchronous requests and handle full control over the request-response process.

What is $.ajax() Method?

The $.ajax() method provides a flexible and configurable approach to make HTTP requests using multiple options and callback functions.

• Supports both GET and POST requests or any custom HTTP method
• Allows custom headers, data types, and request settings
• Handles success, error, and completion using separate callbacks
• Returns a jqXHR object to chain methods like .done(), .fail(), etc.
• Ideal for APIs, JSON data exchange, or advanced request control

Syntax of $.ajax() Method

The $.ajax() method accepts a configuration object with multiple options to define the request behavior.

$.ajax({
	url: 'url',
	method: 'GET',
	data: { key: 'value' },
	success: function (response) {
		// handle success
	},
	error: function (xhr) {
		// handle error
	}
});

Remote Server File

This is the external HTML file that contains the data table to be loaded dynamically into the page.

<table>
	<thead>
		<tr><th>Sr</th><th>Name</th><th>Email</th><th>City</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>John Doe</td><td>john.doe@example.com</td><td>Starville</td></tr>
		<tr><td>2</td><td>Jane Smith</td><td>jane.smith@example.com</td><td>Moonshade</td></tr>
		<tr><td>3</td><td>Bob Brown</td><td>bob.brown@example.com</td><td>Cryptown</td></tr>
		<tr><td>4</td><td>Alice Johnson</td><td>alice.johnson@example.com</td><td>Echoport</td></tr>
	</tbody>
</table>

Request Data Using $.ajax()

This example shows how to send a request using $.ajax() and display the received content inside a target element when a button is clicked.

$(function () {
	$('#loadContent').on('click', function () {
		$.ajax({
			url: 'demo-content.html',
			type: 'GET',
			success: function (data) {
				$('#target').html(data);
			},
			error: function () {
				$('#target').html('Error loading data.');
			}
		});
	});
});

jQuery AJAX $.get() Request Method

The jQuery $.get() method sends a simple HTTP GET request to retrieve data from a server and execute a callback on success.

What is $.get() Method?

The $.get() method is a shorthand AJAX function that sends a GET request to a server and processes the response with a callback.

• Sends key/value data using URL query parameters
• Returns data such as text, HTML, JSON, etc.
• Does not require complex configuration
• Useful for lightweight server communication

Syntax of $.get() Method

The $.get() method uses a URL, optional data object, and a callback.

$.get(url, data, callback);

Request Data Using $.get()

This example shows how to retrieve JSON data from the server using the $.get() method and modify the DOM.

$(function () {
	$('#loadContent').on('click', function () {
		$.get('demo-content.html', function (data) {
			$('#target').html(data);
		}).fail(function () {
			$('#target').html('Error loading data.');
		});
	});
});

jQuery AJAX $.post() Request Method

The jQuery $.post() method sends an HTTP POST request to submit form or payload data to a server endpoint.

What is $.post() Method?

The $.post() method is a shorthand AJAX function used to send data to the server with a POST request and handle the response.

• Ideal for submitting form fields or payload data
• Encodes data in the request body (not the URL)
• Supports a callback for processing server response
• Typically used for insert or update operations

Syntax of $.post() Method

The $.post() method uses a URL, data object, and a callback.

$.post(url, data, callback);

Request Data Using $.post()

This example shows how to send form data to the server using $.post() and handle the response inside a callback.

$(function () {
	$('#loadContent').on('click', function () {
		$.post('demo-content.html', {}, function (response) {
			$('#target').html(response);
		}).fail(function () {
			$('#target').html('Error loading data.');
		});
	});
});

jQuery AJAX load() Request Method

The jQuery AJAX load() method offers a fast way to retrieve server content and update page elements without a full reload. Use jQuery's load() method for:

What is load() Method?

The load() method is a jQuery AJAX shortcut that fetches HTML from the server and directly injects it into the selected element.

• Fetches server-rendered HTML via a GET request only
• Targets a specific DOM element to insert the response into
• Can include query parameters directly in the URL
• Supports a callback function for handling success or failure
• Optionally filters the response to load only specific HTML fragments

Syntax of load() Method

The load() method follows a straightforward syntax structure that supports a URL, optional data, and a callback function.

$(selector).load(url, data, callback);

Request Data Using load()

This example demonstrates how to use the jQuery load() method to fetch an HTML file and insert its contents into a target element when a button is clicked.

$(function () {
	$('#loadContent').on('click', function () {
		$('#target').load('demo-content.html');
	});
});

jQuery AJAX Reference

For a complete overview of all jQuery AJAX methods, visit the jQuery AJAX Reference.