$.ajax() method
The $.ajax() method is a powerful and flexible way to make asynchronous HTTP requests using jQuery. It allows you to send and receive data to/from a server without reloading the page. This method can perform GET, POST, PUT, DELETE, and other HTTP methods, making it ideal for working with APIs or backend servers.
Syntax of $.ajax() method:
$.ajax({
url: 'your-api-endpoint',
type: 'GET' | 'POST' | 'PUT' | 'DELETE',
data: { key1: 'value1', key2: 'value2' },
dataType: 'json', // expected data type from server
success: function(response) {
// handle success
},
error: function(xhr, status, error) {
// handle error
}
});
Example: Using $.ajax() to send a GET request
<!DOCTYPE html>
<html>
<head>
<title>$.ajax() Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="loadData">Load Data</button>
<div id="result"></div>
<script>
$('#loadData').click(function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1', // sample API
type: 'GET',
dataType: 'json',
success: function (data) {
$('#result').html(
`<h3>${data.title}</h3><p>${data.body}</p>`
);
},
error: function (xhr, status, error) {
$('#result').html("An error occurred: " + error);
}
});
});
</script>
</body>
</html>
Key Points of $.ajax() method:
- url: Endpoint where request is sent.
- type: HTTP method (e.g.,
GET,POST). - data: Data to be sent to the server.
- dataType: Expected data type of the response.
- success: Callback function when request is successful.
- error: Callback function when request fails.
At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.
Terms Disclaimer About Us Contact Us
Copyright 2023-2025 © All rights reserved.