Hello Readers,
Using below jQuery methods, you can make ajax calls.
- load(): It's a jquery method and simple method in jquery and the most powerful AJAX method.Load method load the data from the server and returned the data and this return data put into the selected elemets or matched elements.
Syntax:
$(selector).load(URL,data,callback);
Parameters:
url this URL is used to send the request.
data Here, data is an optional parameter and it is sent along with the request.
callback Here, callback is also a optional parameter and represents a function which is executed after the request proceed.
Code Example :
Below is the result.html file:
THIS IS RESULT
Use the result.html into the load method.
<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() {
$("#driver").click(function(event){
$('#stage').load('result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
- $.getJSON():
It's another method to make ajax request and is used to get the Json data using ajax get method.
Syntax :
$.getJSON( url, [data], [callback] )
Parameters :
url this URL is used to send the request.
data It's a optional parameter which represents key or value pairs that will be sent to the server.
callback It's also a optional parameter which represents the function and executed after the data is loaded successfully.
Code Example :
Below is the result.json file :
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
Use the above result.json file into the $.getJSON method and use some jquery method like .html and .append to add to the data.
<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() {
$("#driver").click(function(event){
$.getJSON('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>
<p>Click on the button to load result.html file:</p>
<div id = "stage" style = "background-color:#cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
- $.get():
It's also a jquery ajax method wich is used to request the data from the server using GET request.
Syntax :
$.get( url, [data], [callback], [type] )
url this URL is used to send the request..
data It's a optional parameter which represents key or value pairs that will be sent to the server.
callback It's also a optional parameter which represents the function and executed after the data is loaded successfully.
type type also a optional parameter which represents type of the data to be returned to callback function: ("xml", "html", "script", "json", "jsonp", or "text".)
Code Example :
Below is the result.php file :
<?php
if( $_REQUEST["name"] ) {
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
The above code, request name data using the result.php file.
After that in below code use the result.php file to request data using $.get method.
<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() {
$("#driver").click(function(event){
$.get(
"result.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file </p>
<span id = "stage" style = "background-color:#cc0;">
STAGE
</span>
<div><input type = "button" id = "driver"
value = "Load Data" /></div>
</body>
</html>
- $.post():
$.post() is the method to make ajax request in jqury. In this method load the data from server using POST request.
Syntax :
$.post( url, [data], [callback], [type] )
Parameters :
url this URL is used to send the request.
data It's a optional parameter which represents key or value pairs that will be sent to the server.
callback It's also a optional parameter which represents the function and executed after the data is loaded successfully.
type optional parameter represents a type of data to be returned to callback function( "xml", "html", "script", "json", "jsonp", or "text".)
Code Example :
Below is the result.php file:
<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() {
$("#driver").click(function(event){
$.post(
"result.php",
{ name: "Zara" },
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:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
In the above code, example use the result.php into the $.post method to post the name data and in result.php file use the $_REQUEST method and get the result.
Output:
Welcome Zara
- $.ajax():
it's a jquery method and it is used to perform the ajax request i.e (asynchronous request).Jquery ajax methods use the ajax() method because ajax() method is mostly used for request.
Syntax :
$.ajax({name:value, name:value, ... })
In the above, syntax for the ajax request parameters specifies one or more name value
Some most useful possible values are given below in ajax() method:
- url: this parameter specifies the URL to send the request to the server.
2.type: type specifies the type of request i.e GET or POST request.
3.data: data specifies data parameters which to be sent to the server.
4.dataType: set the type of data expected of the server response(json,jsonp,xml,script,html).
5.async: async means asynchronous request which indicate the requset is asynchronous or not. It's default is true and if set false then use the sync request.
6.complete(xhr,status):this function run when the request is finished after success and error functions.
7.error(xhr,status,error): this function to run if the request is fails.
Code Example :
Below is demo.txt file :
This is some text in a paragraph.
In the above code consider the txt and save in demo.txt file.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>External Content</button>
</body>
</html>
In the above code demo.txt file is used into $.ajax() method and use url and success function to change the given div to demo.txt file content on click of button in jquery ajax.
0 Comment(s)