jQuery AJAX allows web pages to communicate with servers asynchronously without reloading the page. It simplifies HTTP requests such as GET, POST, PUT, and DELETE using easy-to-use methods.
The core method is $.ajax(), which provides full control over the request lifecycle.
// Basic jQuery AJAX syntax
$.ajax({
url: "server.php",
type: "GET",
success: function(response) {
console.log(response);
}
});
// Load data from a public API using jQuery AJAX
$("#loadBtn").click(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
method: "GET",
success: function(data) {
$("#result").text(JSON.stringify(data, null, 2));
}
});
});
When the button is clicked, an AJAX request is sent to the API. The response is received as JSON and displayed instantly without reloading the page.
Click the button above to load data...