jQuery $.ajax() Method

📔 : JQuery 🔗

$.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 कर सकते हैं।

jQuery $.ajax() Syntax

$.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 कर सकते हैं।

jQuery $.ajax() Additional Options

$.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 रन होगी।

jQuery $.ajax() Example

<!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 करता है ।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook