Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about some of the JQuery Ajax methods. So read through with absolute care and feel free to ask questions too where necessary.
jQuery.ajax(options) Method
The jQuery.ajax( options ) method loads a remote page making use of an HTTP request.
The $.ajax( ) returns the xml HTTP Request that it creates. In most of the cases, you will not need that object to manipulate directly, but it is as well available if you need to abort the request manually.
The $.ajax( ) returns the xml HTTP Request that it creates. In most of the cases, you will not need that object to manipulate directly, but it is as well available if you need to abort the request manually.
Syntax
The following below is the syntax to make use of this method -
$.ajax( options )
Parameter Details
Below is the description of all the parameters -
- options - This parameter is a set of key/value pairs that configures the AJAX request. All the options are optional.
| Sr.No. | Option & Description |
|---|---|
| 1 | async
A Boolean indicating whether to perform the request asynchronously. The default value is true.
|
| 2 | beforeSend
A callback function that is executed before the request is sent.
|
| 3 | complete
A callback function that executes whenever the request finishes.
|
| 4 | contentType
A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
|
| 5 | data
A map or string that is sent to the server with the request.
|
| 6 | dataFilter
A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
|
| 7 | dataType
A string defining the type of data expected back from the server (xml, html, json, or script).
|
| 8 | error
A callback function that is executed if the request fails.
|
| 9 | global
A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
|
| 10 | ifModified
A Boolean indicating whether the server should check if the page is modified before responding to the request.
|
| 11 | jsonp
Override the callback function name in a jsonp request.
|
| 12 | password
A password to be used in response to an HTTP access authentication request.
|
| 13 | processData
A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
|
| 14 | success
A callback function that is executed if the request succeeds.
|
| 15 | timeout
Number of milliseconds after which the request will time out in failure.
|
| 16 | timeout
Set a local timeout (in milliseconds) for the request.
|
| 17 | type
A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
|
| 18 | url
A string containing the URL to which the request is sent.
|
| 19 | username
A username to be used in response to an HTTP access authentication request.
|
| 20 | xhr
Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.
|
Example
Below is a short example on how to implement this method. Here we will use the success handler to populate returned HTML -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.ajax( {
url: 'jquery/result.html' ,
success: function( data ) {
$( '#stage' ).html( data );
}
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.ajax( {
url: 'jquery/result.html' ,
success: function( data ) {
$( '#stage' ).html( data );
}
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assuming we have the following content in the /jquery/result.html file -
<h1>THIS IS RESULT</h1>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED: The Ultimate Guide to JQuery AJAX
jQuery.ajaxSetup(options) Method
jQuery.ajaxSetup(options) method sets the global settings for future AJAX requests.
Syntax
Below is the syntax to make use of this method -
$.ajaxSetup( options )
Parameter Details
Below is the description of all the parameters -
- options - This parameter is a set of key/value pairs that configures the AJAX request. All the options are optional.
| Sr.No. | Option & Description |
|---|---|
| 1 | async
A Boolean indicating whether to perform the request asynchronously. The default value is true.
|
| 2 | beforeSend
A callback function that is executed before the request is sent.
|
| 3 | complete
A callback function that executes whenever the request finishes.
|
| 4 | contentType
A string containing a MIME content type to set for the request. The default value is application/x-www-form-urlencoded.
|
| 5 | data
A map or string that is sent to the server with the request.
|
| 6 | dataFilter
A function to be used to handle the raw responsed data of XMLHttpRequest. This is a pre-filtering function to sanitize the response.
|
| 7 | dataType
A string defining the type of data expected back from the server (xml, html, json, or script).
|
| 8 | error
A callback function that is executed if the request fails.
|
| 9 | global
A Boolean indicating whether global AJAX event handlers will be triggered by this request. The default value is true.
|
| 10 | ifModified
A Boolean indicating whether the server should check if the page is modified before responding to the request.
|
| 11 | jsonp
Override the callback function name in a jsonp request.
|
| 12 | password
A password to be used in response to an HTTP access authentication request.
|
| 13 | processData
A Boolean indicating whether to convert the submitted data from an object form into a query-string form. The default value is true.
|
| 14 | success
A callback function that is executed if the request succeeds.
|
| 15 | timeout
Number of milliseconds after which the request will time out in failure.
|
| 16 | timeout
Set a local timeout (in milliseconds) for the request.
|
| 17 | type
A string defining the HTTP method to use for the request (GET or POST). The default value is GET.
|
| 18 | url
A string containing the URL to which the request is sent.
|
| 19 | username
A username to be used in response to an HTTP access authentication request.
|
| 20 | xhr
Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise.
|
Example
Below is a short example on how to implement this method. Here we will use the success handler to populate returned HTML -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
// Perform a global setting
$.ajaxSetup( {
url: "jquery/result.html"
} );
$.ajax( {
success: function( data ) {
$( '#stage' ).html( data );
}
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
// Perform a global setting
$.ajaxSetup( {
url: "jquery/result.html"
} );
$.ajax( {
success: function( data ) {
$( '#stage' ).html( data );
}
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assuming we have the following content in the /jquery/result.html file -
<h1>THIS IS RESULT</h1>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED : JQuery Event Manipulation Methods
jQuery.get( ) Method
jQuery.get(url, [data], [callback], [type]) method loads data from the server using a GET HTTP request.
This method returns the XML Http Request object.
This method returns the XML Http Request object.
Syntax
Below is the syntax to use this method -
$.get( url , [data] , [callback] , [type] );
Parameter Details
Below is the description of all the parameters -
- url - A string containing the URL to which the request is sent.
- data - This is an optional parameter which represents key value pairs that will be sent to the server.
- callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
- type - This is an optional parameter which represents the data type to be returned to callback function: "script", "xml", "html", "json", "jsonp", or "text".
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.get( "result.php" ,
{ name: "Zara" },
function( data ) {
$( '#stage' ).html( data );
}
);
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.get( "result.php" ,
{ name: "Zara" },
function( data ) {
$( '#stage' ).html( data );
}
);
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assuming we have the following PHP content in /jquery/result.php file -
<?php
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome".$name;
}
?>
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome".$name;
}
?>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED POST: A Comprehensive Guide to DOM Filter Methods in jQuery
jQuery.getJSON( ) Method
jQuery.getJSON() method load the JSON data from the server using a GET HTTP Request.
This method returns the XML Http Request object.
This method returns the XML Http Request object.
Syntax
Below is the syntax for this method -
$.getJSON( url , [data] , [callback] );
Parameter Details
Below is the description of all the parameters -
- url - String containing the URL to which request was sent.
- data - This is an optional parameter which represents key value pairs that will be sent to the server.
- callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.getJSON( '/jquery/result.json' , function( jd ) {
$( '#stage' ).html( '<p> Name: ' + jd.name + '</p>' );
$( '#stage' ).append( '<p> Age: ' + jd.age + ' </p>' );
$( '#stage' ).append( '<p> Sex: ' + jd.sex + '</p>' );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.json file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.getJSON( '/jquery/result.json' , function( jd ) {
$( '#stage' ).html( '<p> Name: ' + jd.name + '</p>' );
$( '#stage' ).append( '<p> Age: ' + jd.age + ' </p>' );
$( '#stage' ).append( '<p> Sex: ' + jd.sex + '</p>' );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.json file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below JSON content in /jquery/result.json file -
{
"name" : "Zara Ali",
"age" : "67",
"sex" : "female"
}
"name" : "Zara Ali",
"age" : "67",
"sex" : "female"
}
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED: Understanding the Basics of jQuery
jQuery.getScript( ) Method
jQuery.getScript() method loads and executes a JavaScript file by using an HTTP GET Request.
This method returns the XML Http Request object.
This method returns the XML Http Request object.
Syntax
The following below is the syntax for this method -
$.getScript( url , [callback] );
Parameter Details
Below is the description of all the parameters -
- url - String containing the URL to which request was sent.
- callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.getScript( 'result.js' , function( jd ) {
// Call custom function defined in script
CheckJS( );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load result.js file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.getScript( 'result.js' , function( jd ) {
// Call custom function defined in script
CheckJS( );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load result.js file:</span>
<div id = "stage" style = "background-color: yellow;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assuming we have the following JS content in the result.js file -
function CheckJS( ) {
alert( "This is JavaScript" );
}
alert( "This is JavaScript" );
}
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED : Understanding JavaScript Document Object Model
jQuery.post( ) Method
jQuery.post(url, [data], [callback], [type]) method loads data from the server by making use of the POST Http request. The method returns the XMLHttpRequest object
Syntax
The following below is the syntax to use this method -
$.post( url , [data] , [callback] , [type] );
Parameter Details
Below is the description of all the parameters -
- url - A string containing the URL to which the request is sent.
- data - This is an optional parameter which represents key value pairs that will be sent to the server.
- callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
- type - This is an optional parameter which represents the data type to be returned to callback function: "script", "xml", "html", "json", "jsonp", or "text".
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post( "/jquery/result.php" ,
{ name: "Zara" },
function( data ) {
$( '#stage' ).html( data );
}
);
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post( "/jquery/result.php" ,
{ name: "Zara" },
function( data ) {
$( '#stage' ).html( data );
}
);
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assuming we have the following PHP content in /jquery/result.php file -
<?php
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome".$name;
}
?>
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome".$name;
}
?>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED : The Regular Expressions Methods in JavaScript
load( ) Method
The load(url, [data], [callback]) method loads data from the server and places the returned HTML into the matched element.
Syntax
The following below is the syntax to use this method -
[selector].load( url , [data] , [callback] );
Parameter Details
Below is the description of all the parameters -
- url - A string containing the URL to which the request is sent.
- data - This is an optional parameter which represents the map of data that is sent with the request.
- callback - This is an optional parameter which represents a function to be executed whenever the data is loaded successfully.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$( '#stage' ).load( 'result.html' );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$( '#stage' ).load( 'result.html' );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.html file:</span>
<div id = "stage" style = "background-color: green;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Assume we have the below HTML content in /jquery/result.html file -
<h1>THIS IS RESULT.....</h1>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE
RECOMMENDED POST : Regular Expressions in JavaScript with examples
serialize( ) Method
The serialize( url, [data], [callback] ) method serializes a set of input elements into a string of data.
Syntax
The following below is the syntax to use this method -
$.serialize( );
Parameter Details
Below is the description of all the parameters -
- NA.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post(
"/jquery/serialize.php" ,
$( "testform" ).serialize( ),
function( data ) {
$( '#stage1' ).html( data );
}
);
var str = $( "#testform" ).serialize( );
$( "#stage2" ).text( str );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<br />
<div id = "stage2" style = "background-color: green; ">
STAGE - 2
</div>
<form id = "testform">
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name" size = "50" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type = "text" name = "age" size = "50" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name = "sex">
<option value = "Male" selected>Male</option>
<option value = "Female" selected>Female</option>
</select></td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" id = "driver" value = "Load Data" />
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post(
"/jquery/serialize.php" ,
$( "testform" ).serialize( ),
function( data ) {
$( '#stage1' ).html( data );
}
);
var str = $( "#testform" ).serialize( );
$( "#stage2" ).text( str );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<br />
<div id = "stage2" style = "background-color: green; ">
STAGE - 2
</div>
<form id = "testform">
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name" size = "50" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type = "text" name = "age" size = "50" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name = "sex">
<option value = "Male" selected>Male</option>
<option value = "Female" selected>Female</option>
</select></td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" id = "driver" value = "Load Data" />
</td>
</tr>
</table>
</form>
</body>
</html>
Assume we have the below PHP content in /jquery/serialize.php file -
<?php
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome" . $name;
$age = $_REQUEST[ 'age' ];
echo "<br /> Your age : " . $age
$sex = $_REQUEST[ 'sex' ];
echo "<br /> Your gender : " . $sex
}
?>
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome" . $name;
$age = $_REQUEST[ 'age' ];
echo "<br /> Your age : " . $age
$sex = $_REQUEST[ 'sex' ];
echo "<br /> Your gender : " . $sex
}
?>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE - 1
STAGE - 2
RECOMMENDED: JavaScript Date Methods with examples
serializeArray( ) Method
serializeArray() method serializes all forms and form elements just like .serialize( ) method but returns a JSON data structure for you to work with.
The JSON returned is not a string. You must make use of a plugin or third party library to convert to a string.
The JSON returned is not a string. You must make use of a plugin or third party library to convert to a string.
Syntax
The following below is the syntax to use this method -
$.serialize( );
Parameter Details
Below is the description of all the parameters -
- NA.
Example
Below is a short example on how to implement this method -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post(
"/jquery/serialize.php" ,
$( "testform" ).serializeArray( ),
function( data ) {
$( '#stage1' ).html( data );
}
);
var fields = $( "#testform" ).serializeArray( );
$( "#stage2" ).empty( );
jQuery.each( fields, function( i, field ) {
$( "#stage2" ).append( field.value + " " );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<br />
<div id = "stage2" style = "background-color: green; ">
STAGE - 2
</div>
<form id = "testform">
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name" size = "50" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type = "text" name = "age" size = "50" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name = "sex">
<option value = "Male" selected>Male</option>
<option value = "Female" selected>Female</option>
</select></td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" id = "driver" value = "Load Data" />
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "#driver" ).click( function( event ) {
$.post(
"/jquery/serialize.php" ,
$( "testform" ).serializeArray( ),
function( data ) {
$( '#stage1' ).html( data );
}
);
var fields = $( "#testform" ).serializeArray( );
$( "#stage2" ).empty( );
jQuery.each( fields, function( i, field ) {
$( "#stage2" ).append( field.value + " " );
} );
} );
} );
</script>
</head>
<body>
<span>Click on the button below to load /jquery/result.php file:</span>
<div id = "stage1" style = "background-color: green;">
STAGE - 1
</div>
<br />
<div id = "stage2" style = "background-color: green; ">
STAGE - 2
</div>
<form id = "testform">
<table>
<tr>
<td>Name:</td>
<td><input type = "text" name = "name" size = "50" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type = "text" name = "age" size = "50" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name = "sex">
<option value = "Male" selected>Male</option>
<option value = "Female" selected>Female</option>
</select></td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" id = "driver" value = "Load Data" />
</td>
</tr>
</table>
</form>
</body>
</html>
Assume we have the below PHP content in /jquery/serialize.php file -
<?php
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome" . $name;
$age = $_REQUEST[ 'age' ];
echo "<br /> Your age : " . $age
$sex = $_REQUEST[ 'sex' ];
echo "<br /> Your gender : " . $sex
}
?>
if( $_REQUEST[ "name" ] ) {
$name = $_REQUEST[ 'name' ];
echo "Welcome" . $name;
$age = $_REQUEST[ 'age' ];
echo "<br /> Your age : " . $age
$sex = $_REQUEST[ 'sex' ];
echo "<br /> Your gender : " . $sex
}
?>
Output
When you click on the given button below, then result.html files will be loaded -
STAGE - 1
STAGE - 2
Alright guys! We have come to the end of this tutorial post on jQuery Ajax methods. In our next tutorial post, we will be discussing about the Ajax Events Methods.
Do feel free to ask your questions where necessary via the comment box below and i will attend to them as soon as possible.
Follow us on our various social media handles to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our latest tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Do feel free to ask your questions where necessary via the comment box below and i will attend to them as soon as possible.
Follow us on our various social media handles to stay updated with our latest tutorials. You can also subscribe to our newsletter to get our latest tutorials delivered directly to your emails.
Thanks for reading and bye for now.