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 किये दोनों Syntaxes में आप कोई भी 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 करता है ।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
