If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
$.ajax() method का use Asynchronous HTTP Request send करके data को submit या retrieve करने के लिए किया जाता है। इस method के through किसी type की request (GET / POST / DELETE / PUT) send करने के लिए किया जा सकता है।
पिछले Topic में आपने $.load() , $.get(), $.post() functions के बारे में पढ़ा होगा। यह उनसे थोड़ा सा अलग है , इसके through आप की भी तरह की Request send कर सकते हैं , इसके अलावा कुछ customizations भी provide करता है जिससे हम Request के flow को control कर सकते हैं।
$.ajax({
url: 'url',
type: 'GET/POST',
data: {param1: 'value1'},
})
.done(function(response) {
console.log("response", response);
})
.fail(function(error) {
console.log("error", error);
})
.always(function() {
console.log("It will run always");
});
/*alternatively you can use this one*/
$.ajax({
url: 'url',
type: 'GET/POST',
data: {param1: 'value1'},
success : function(response){
/*do whatever you want*/
},
error : function(error){
/*do whatever you want*/
}
});ऊपर define किये दोनों Syntax में आप कोई भी use कर सकते हैं।
●●●
$.ajax({
url: 'url',
type: 'GET',
data: {},
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
cache: false,
contentType: false,
processData: false,
async : true,
success: function(data){
}
error : function(error){
}
});Additionally आप अपनी need के according options set कर सकते हैं।
contentType : send किये जा रहे data का type क्या है , default 'application/x-www-form-urlencoded; charset=UTF-8' set है। इसके अलावा आप 'application/json; charset=utf-8' भी set कर सकते हैं।
dataType : यह define करता है कि server से किस type response return हो रहा है। response xml, json, script, or html format में हो सकता है।
cache : true सिर्फ GET & HEAD type की request के साथ work करता है।
async : means request Synchronously run होगी या Asynchronously रन होगी।
●●●
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery $.ajax() Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p class="target_elm">Click bellow buttons button to see result.</p>
<p>
<button class="send_request">Send Request</button>
</p>
<script type="text/javascript">
window.onload = function(){
/*check if jquery working*/
if(window.jQuery)
{
$(".send_request").click(function(event) {
$.ajax({
url: 'handle_request.php',
type: 'POST',
dataType : 'json',
async : true,
data: {
name : 'Mohit',
age : 25,
gender : 'Male',
address : 'India'
},
success : function(response){
$(".target_elm").html('<p>Request Completed</p>');
/*however , we have defined dataType : json
* means data returning from server is in the JSON format
* so here we are getting JSON Object, we can access it's properties directly by it's name
*/
$(".target_elm").append('<p>Response : Name : '+response.name+' Age : '+response.age+' Gender :'+response.gender+' Address : '+response.address+'</p>');
},
error : function(error){
console.log('Error : ', error);
}
});
});
}
}
</script>
</body>
</html>PHP File : handle_request.php
<?php
/*use json_encode to return json data*/
echo json_encode($_POST);
?>Internally $.post() method भी $.ajax() method ही POST option के साथ use करता है ।