What Is jQuery AJAX?
AJAX stands for Asynchronous JavaScript and XML. jQuery AJAX is used to store the data in the background and display it on your web pages, without actually reloading the entire web page.
The jQuery AJAX methods let you request text, HTML, XML, or JSON from a remote server. jQuery AJAX has various methods to perform various actions on web pages like get, post, param, ajax, and much more.
What Does jQuery AJAX Do?
The main function of the jQuery AJAX method is to load and display data on your web pages without reloading it. jQuery AJAX can perform various actions on your web pages like load, get, post, ajax, start, stop, send, error, etc using various AJAX methods.
It allows you to load external data from the server into the selected HTML elements directly. Thus jQuery AJAX helps you develop faster, amazing, and interactive web pages for your website.
How To Use jQuery AJAX?
jQuery AJAX methods are very easy to implement. They are written within the <script> tag in your HTML file. Here is the syntax for jQuery AJAX:
Syntax:
$.methodname({name:value, name:value, ... })
Example:
For .ajax()
method the syntax will be:
$.ajax({name:value,name:value, ... })
Let us see an
example to implement the ajax() method using the jQuery AJAX method to change
the text.
Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "test_ajax.txt", success: function(result){
$("#test").html(result);
}});
});
});
</script>
</head>
<body>
<div id="test"><h2>Example to implement jQuery .ajax() method</h2></div>
<button>Click Me!</button>
</body>
</html> Here's how the output will be:
Before clicking the button
After clicking the button
The text is changed when you click the Click Me button. This is done using the .ajax() method.
What Are The Various jQuery AJAX Methods?
jQuery provides a variety of AJAX methods to load data from the server into webpages. Some of the important ones are listed below:
1.The .get() method:
The .get() method is used to load data using an HTTP GET request from the server.
Syntax:
$.get(URL,data,function(data,status,xhr),dataType)
Here ”URL” specifies the URL you want to request, “data” specifies data to send to the server, “function” is used to specify a function to run along with data, status, and xhr which contains data, status, and XMLHttpRequest object. The “dataType” contains the data type expected of the server response.
2.The .post() method:
The .post() method is used to load data using an HTTP POST request from the server.
Syntax:
$(selector).post(URL,data,function(data,status,xhr),dataType)
3.The load() method:
The load() method is used to load data from a server. It puts the data that is returned into the selected element.
Syntax:
$(selector).load(url,data,function(response,status,xhr))
4.The .getJSON() method:
The .getJSON() method gets JSON data using an AJAX HTTP GET request.
Syntax:
$(selector).getJSON(url,data,success(data,status,xhr))
5.The ajaxSetup() method:
For future AJAX requests, the ajaxSetup() method sets the default values.
Syntax:
$.ajaxSetup({name:value, name:value, ... })
Let us see an example to use jQuery AJAX .serialize() method to get the serialize values from form. For this, we will add a form to the web page where the user will input the values. . We will also add a button with the click function to fetch the values entered by the user. These values will then be serialize using the .seralize method().
Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="" style="font-size:24px">
Name: <input type="text" name="Name" value="John" style="font-size:20px"><br><br>
Roll No: <input type="text" name="RollNo" value="10" style="font-size:20px"><br><br>
</form>
<button>Click here to serialize values</button><br><br>
<div></div>
</body>
</html>Here's the output will be for the above code:
Conclusion
In this tutorial, we learned what is jQuery AJAX and various jQuery AJAX methods. We also learned how to use various jQuery methods. In the above examples, we implemented the jQuery AJAX .ajax() method to change the content and the jQuery AJAX .serialize() method to get the serialize values from form.
You can also use other jQuery AJAX methods for performing various activities on your web page. To learn such other methods of jQuery, subscribe to our blog!
To know about jQuery selectors, visit our previous blog!
