jQuery $.ajaxPrefilter() Method
Last Updated :
26 Jul, 2024
Jquery $.ajaxPrefilter() method is a powerful jquery method that allows us to modify the settings, option object, URL, and data object of AJAX jquery request before sending a request to the server. If you know the syntax of the AJAX jquery request, you will find that it contains options, objects, and methods that will be performed during the execution of the request. The $.ajaxPrefilter() method can help you modify these parameters of the AJAX jquery request.
Syntax: Here is the syntax of the AJAX Jquery Request:
$.ajax({
url: "/https/www.geeksforgeeks.org/path",
type: "POST/GET",
async: true/false,
success: function(response) {
// task ...
}
error:function(error){
// error handling.
}
})The $.ajaxPrefilter() method can help you modify the value of URL, type, success, etc before the request has been sent to the server. This method is helpful in providing additional data objects and headers for the request.
Syntax: Here is the syntax of the $.ajaxPrefilter() method:
$.ajaxPrefilter([ data_types], handler);
Parameters:
- Datatypes: It is an optional parameter. You can specify the data types for the option objects as a string or array of strings. If it is not specified then all types of data types will be allowed.
- Handler: It is a function and will automatically be called for each request. The following are the parameters for this function:
- Options: It is an object that contains URL, type, and AJAX request settings.
- OriginalOptions: It is an object of original and final options after the modification has been done.
- JqXHR: This parameter option represents the Jquery XHR object.
Let's understand the method with the help of examples and implement the method using Jquery and PHP.
Approach: In this approach, we have created two PHP files ( Let's say Index.php & gfg.php ). The index.php file contains the implementation of the AJAX jquery request as well as the $.ajaxPrefilter() method. The AJAX jquery method sends the data object to gfg.php and then gfg.php sends the received data response to the index.php file. The index.php file displays the received response.
Example 1: This example illustrates the use of the $.ajaxPrefilter() method to add two more data values with the data object of the AJAX jquery request.
PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
$.ajaxPrefilter() Jquery Method
</h3>
<button onclick="sendReq()">
Send AJAX Request
</button>
<br><br>
<div id="resbox">Display Response!</div>
<script>
$(document).ready(function () {
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
options.data = $.param($.extend(originalOptions.data, {
salary: '20,000',
phone: '0123456789'
}));
});
});
const sendReq = () => {
$.ajax({
type: "POST",
url: 'gfg.php',
data: {
name: "Geek",
id: "101"
},
success: function (response) {
document.getElementById('resbox').innerHTML = response;
}
});
}
</script>
</body>
</html>
<?php
echo "User : ". $_POST['name'] . "\n id : " . $_POST['id'].
" Phone : " . $_POST['phone'] . " Salary : " , $_POST['salary'];
?>
Output: In the above PHP, the $.ajaxPrefilter() method adds salary and phone key-value pairs to the data object of the AJAX jquery request that already contains name and id key-value pairs. The success method displays the response from the server page.
Example 2: In the below example, we have changed the object options type, URL, and data using the $.ajaxPrefilter() method. In the AJAX request the type, URL, and data have the following values:
type:"POST",
url:"gfg.php",
data:{ name: "Geek", id: "101"}
but, these values have been changed by the $.ajaxPrefilter() method. Now the request will send to redirect.php through the "GET" method and the response from the redirect.php will be displayed.
PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
</head>
<body>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
$.ajaxPrefilter() Jquery Method
</h3>
<button onclick="sendReq()">
Send AJAX Request
</button>
<br><br>
<div id="resbox">
Display Response!
</div>
<script>
$(document).ready(function () {
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
options.url = "redirect.php";
options.type = "GET";
options.data = null;
});
});
const sendReq = () => {
$.ajax({
type: "POST",
url: 'gfg.php',
data: {
name: "Geek",
id: "101"
},
success: function (response) {
document.getElementById('resbox').innerHTML = response;
}
});
}
</script>
</body>
</html>
<?php
echo "<h2 style='color:red'>Redirect.php</h2>";
?>
Output:
Similar Reads
jQuery filter() Method
The jQuery is a very powerful tool which helps us to incorporate a variety of DOM traversal methods to select elements in a document randomly or in sequential order. Most of the DOM traversal methods do not modify the elements whereas they filter them out upon the given conditions. The filter() meth
2 min read
jQuery ajaxComplete() Method
The ajaxComplete() method is used to specify a function to be run when an AJAX request completes. Syntax: $(document).ajaxComplete(function(event, xhr, options))Parameter: event: It contains the event object. xhr: It contains the XMLHttpRequest object. options: It contains the used options in AJAX r
2 min read
jQuery ajaxSetup() Method
The ajaxSetup() method in jQuery is used to set the default values for future AJAX requests. Syntax: $.ajaxSetup( {name:value, name:value, ... } )Parameters: type: It is used to specify the type of request.url: It is used to specify the URL to send the request to.username: It is used to specify a us
3 min read
jQuery ajax() Method
The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.Syntax:$.ajax({name:value,
4 min read
jQuery ajaxStart() Method
The ajaxStart() method is used to specify a function to be run when an AJAX request starts. Syntax: $(document).ajaxStart(function())Parameter:: It takes only one parameter. function(): It specifies the function to run when the Ajax request starts. The demo.txt file is stored on the server and it wi
2 min read
jQuery ajaxError() Method
The ajaxError() method in jQuery is used to specify a function to be run when an AJAX request fails. Syntax: $(document).ajaxError( function(event, xhr, options, exc) )Parameters: This method accepts single parameter function which is mandatory. This function accepts four parameters which are listed
2 min read
jQuery ajaxSend() Method
The ajaxSend() method in jQuery is used to specify the function to be run when an AJAX request is about to send. Syntax: $(document).ajaxSend( function(event, xhr, options) ) Parameters: This method accepts a single parameter function which is mandatory. The function accepts three parameters as ment
2 min read
jQuery ajaxStop() Method
The ajaxStop() method is used to specify a function to be run when AJAX requests have been completed. Syntax: $(document).ajaxStop(function())Parameter: It takes only one parameter. function(): It specifies the function to run when the Ajax requests have been completed. The demo.txt file is stored o
2 min read
jQuery ajaxSuccess() Method
The ajaxSuccess() method in jQuery is used to specify the function to be run when an AJAX request completed successfully. Syntax: $(document).ajaxSuccess(function(event, xhr, options))Parameters:: This method accepts a single parameter function which is mandatory. This function accepts three paramet
2 min read
jQuery | get() Method
In jQuery .get() method loads data from the server by using the GET HTTP request. This method returns XMLHttpRequest object. Syntax $.get( url, [data], [callback], [type] ) Parameters url : String containing the URL at which request is to be sent data : This is an optional parameter that represents
2 min read