Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
What is $.ajax() Function ?
$.ajax() :Performs An Asynchronous Request.
- ▪ The ajax() method is used to perform an AJAX (asynchronous HTTP) request.
- ▪ All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
- Syntax :- $.ajax({name:value, name:value, ... })
- The parameters specifies one or more name/value pairs for the AJAX request.
- jQuery ajax() Method :-
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
}); - Description :-
- url
Type: String
A string containing the URL to which the request is sent. - data
Type:PlainObject or String
A plain object or string that is sent to the server with the request. - success
Type:Function(PlainObject data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder. - dataType
Type:String
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html). The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.
Example :- Change the text of a element using an AJAX request:
File name : index.php
<html> <head> <title>The jQuery Result
Example</title>
</head>
<body>
<h2>THIS IS RESULT...</h2>
<p id="p1">
This is some text in a paragraph. </p>
<div
id="div1" > </div >
</body>
</html>
File name : index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#btn").click(function(){
$.ajax({url:"demo.txt",
success:function(result){$("#div1").html(result);}}) }); });
</script>
</head>
<body>
</body>
</html>
File name : index.php
jQuery - AJAX load() Method :-
The load() method loads data from a server and puts the returned data into the selected element.
Syntax: $(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed.
The load( url, data, callback ) method loads data from the server and places the returned HTML into the matched element.
Here is the description of all the parameters used by this method −
- Syntax :- [selector].load( url, [data], [callback] )
- url − The URL of the server-side resource to which the request is sent. It could be a PHP, or JSP script which generates data dynamically or out of a database.
- data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
- callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
- Callback :- a function that is executed when
the request completes. It has three additional parameters
(response, status, xhr).
• response - contains the result data from the request.
• status - contains the status of the request, one of the strings "success", "notmodified", "error", "timeout", or "parsererror".
• xhr - contains the XMLHttpRequest object
File name : index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#btn").click(function(event){
$('#sta').load('result.html'); }); });
</script>
</head>
<body>
<p>Click on the
button to load result.html file:</p>
<div
id="sta" style="background-color:cc0;"> mahtab </div>
<input type="button" id=“btn" value="Load Data" />
</body>
</html>
File name : index.php
File Name:- result.html
<html> <head> <title>The jQuery Result
Example</title>
</head>
<body>
<h1>THIS IS RESULT...</h1>
</body>
</html>
Example :- Another Example.
File name : index.php
File Name:- index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(function(){ $("#tt").load("content.html");});
</script>
</head>
<body>
<div id="tt"> </div> </body>
</html>
File name : index.php
File Name:- content.html
<html> <head> <title>The jQuery Result
Example</title>
</head>
<body>
< id="divContent"> <b>This is external
content</b> </div> </body>
</html>
Example
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
File name : result.html
THIS IS RESULT...
Example :- Another Example 2.
File name : index.php
File Name:- index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo.txt");
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery
AJAX Change This Text</h2> </div>
<button>Get External Content. </button>
</body>
</html>
File name : index.php
File Name:- demo.txt
<html> <head> <title>The jQuery Result
Example</title>
</head>
<body>
<h2>jQuery and AJAX is FUN!!!</h2>
<p
id="p1">This is some text in a paragraph.</p>
</body>
</html>
It is also possible to add a jQuery selector to the URL parameter.
The following example loads the content of the element with id="p1", inside the file "demo_test.txt", into a specific element:
Example :- $("#div1").load("demo_test.txt #p1");
Example :- Another Example 3.
File name : index.php
File Name:- index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery AJAX Change This
Text</h2> </div>
<button>Get External
Content. </button>
</body>
</html>
File name : index.php
File Name:- demo_test.txt
<html> <head> <title>The jQuery Result
Example</title>
</head>
<body>
<h2>jQuery and AJAX is FUN!!!</h2>
<p
id="p1">This is some text in a paragraph.</p>
</body>
</html>
- The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:
- responseTxt - contains the resulting content if the call succeeds
- statusTxt - contains the status of the call
- xhr - contains the XMLHttpRequest object
The following example displays an alert box after the load() method completes. If the load() method has succeeded, it displays "External content loaded successfully!", and if it fails it displays an error message:
Example :- Another Example 4.
File name : index.php
File Name:- index.php
<html> <head> <title>The jQuery
Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<
script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr)
{
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery AJAX Change This
Text</h2> </div>
<button>Get External
Content. </button>
</body>
</html>
Passing Data to the Server
Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>
File name : result.php
<?php
if( $_REQUEST["name"] ){
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
Example :-
File name : mypage.php
<html>
<head>
<title></title>
</head>
<body>
<h2> My Result Page.</h2>
</body>
</html>
File name : index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax( {
url:'mypage.php',
success:function(data) {
$('#stage').html(data);
}
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage" style = "background-color:blue;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>