jQuery
अजाक्स

वाक्य - विन्यास

• var jqXHR = $ .ajax (url [, सेटिंग्स])
• var jqXHR = $ .ajax ([सेटिंग्स])
• jqXHR.done (फ़ंक्शन (डेटा, टेक्स्टस्टैटस, jqXHR) {});
• jqXHR.fail (फ़ंक्शन (jqXHR, textStatus, errorThrown) {});
• jqXHR.always (फ़ंक्शन (jqXHR) {});

पैरामीटर

टिप्पणियों

$ .Ajax () के साथ HTTP रिस्पांस कोड संभालना

.done , .fail और .always अलावा कॉलबैक का वादा करते हैं, जो इस आधार पर ट्रिगर होते हैं कि अनुरोध सफल हुआ था या नहीं, एक विशिष्ट HTTP स्थिति कोड सर्वर से वापस आने पर फ़ंक्शन को ट्रिगर करने का विकल्प होता है। यह statusCode पैरामीटर का उपयोग करके किया जा सकता है।

$.ajax({
    type: {POST or GET or PUT etc.},
    url:  {server.url},
    data: {someData: true},
    statusCode: {
        404: function(responseObject, textStatus, jqXHR) {
            // No content found (404)
            // This code will be executed if the server returns a 404 response
        },
        503: function(responseObject, textStatus, errorThrown) {
            // Service Unavailable (503)
            // This code will be executed if the server returns a 503 response
        }           
    }
})
.done(function(data){
    alert(data);
})
.fail(function(jqXHR, textStatus){
    alert('Something went wrong: ' + textStatus);
})
.always(function(jqXHR, textStatus) {
   alert('Ajax request was finished')
});

आधिकारिक jQuery प्रलेखन राज्यों के रूप में:

यदि अनुरोध सफल होता है, तो स्थिति कोड फ़ंक्शंस, सफलता कॉलबैक के समान पैरामीटर लेती हैं; यदि यह एक त्रुटि (3xx पुनर्निर्देशित सहित) के परिणामस्वरूप होता है, तो वे error कॉलबैक के समान पैरामीटर लेते हैं।

फॉर्म जमा करने के लिए अजाक्स का उपयोग करना

कभी-कभी आपके पास एक फॉर्म हो सकता है और इसे अजाक्स का उपयोग करके सबमिट करना चाहते हैं।

मान लीजिए कि आपके पास यह सरल रूप है -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

निम्नलिखित jQuery कोड का उपयोग किया जा सकता है ( $(document).ready कॉल) -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

व्याख्या

• var $form = $(this) - फॉर्म, पुनः उपयोग के लिए कैश किया गया
• $('#ajax_form').submit(function(event){ - जब आईडी "ajax_form" के साथ फ़ॉर्म सबमिट किया जाता है तो इस फ़ंक्शन को चलाएं और पैरामीटर के रूप में ईवेंट को पास करें।
• event.preventDefault(); - फॉर्म को सामान्य रूप से सबमिट करने से रोकें (वैकल्पिक रूप से हम ajax({}); बाद return false उपयोग कर सकते हैं ajax({}); कथन, जिसका प्रभाव समान होगा)
• url: $form.attr('action'), - फ़ॉर्म की "कार्रवाई" विशेषता का मूल्य प्राप्त करें और इसे "url" संपत्ति के लिए उपयोग करें।
• data: $form.serialize(), - सर्वर में भेजने के लिए उपयुक्त स्ट्रिंग में फॉर्म के भीतर इनपुट्स को परिवर्तित करता है। इस मामले में यह "name=bus&[email protected]" जैसा कुछ लौटाएगा

JSON डेटा भेजना

jQuery के jSON प्रतिक्रियाओं को दर्दरहित बना देता है, लेकिन जब अनुरोध दिया जाता है तो आपको JSON प्रारूप में डेटा भेजने के लिए थोड़ा और काम करना पड़ता है:

 $.ajax("/json-consuming-route", {
      data: JSON.stringify({author: {name: "Bullwinkle J. Moose", 
                                     email: "[email protected]"} }),
      method: "POST",
      contentType: "application/json"
   });

निरीक्षण करें कि हम जो डेटा भेज रहे हैं, contentType लिए सही सामग्री contentType निर्दिष्ट कर रहे हैं; यह सामान्य रूप से एक अच्छा अभ्यास है और आपके द्वारा पोस्ट किए जा रहे एपीआई द्वारा इसकी आवश्यकता हो सकती है - लेकिन इसमें jQuery को %20 से + के डिफ़ॉल्ट रूपांतरण को न करने के निर्देश का साइड-इफ़ेक्ट भी है, जो कि अगर contentType था तो यह होगा application/x-www-form-urlencoded के डिफ़ॉल्ट मान पर छोड़ दिया गया। यदि किसी कारण से आपको डिफ़ॉल्ट पर सेट किया गया कंटेंट टाइप छोड़ना होगा, तो इसे रोकने के लिए processData को झूठा सेट करना सुनिश्चित करें।

JSON.stringify लिए कॉल को यहां टाला जा सकता है, लेकिन इसका उपयोग करने से हमें एक जावास्क्रिप्ट ऑब्जेक्ट के रूप में डेटा प्रदान करने की अनुमति मिलती है (इस प्रकार संपत्ति के नामों को उद्धृत करने में विफल रहने जैसे JSON सिंटैक्स त्रुटियों से बचने के लिए)।

सभी एक उदाहरण में

अजाक्स प्राप्त करें:

समाधान 1:

$.get('url.html', function(data){
    $('#update-box').html(data);
});

समाधान 2:

 $.ajax({
     type: 'GET',
     url: 'url.php',  
 }).done(function(data){
     $('#update-box').html(data);
 }).fail(function(jqXHR, textStatus){
     alert('Error occured: ' + textStatus);
 });

अजाक्स लोड: एक और अजाक्स सरलता के लिए बनाई गई विधि है

$('#update-box').load('url.html');

अतिरिक्त डेटा के साथ .load भी कहा जा सकता है। डेटा भाग को स्ट्रिंग या ऑब्जेक्ट के रूप में प्रदान किया जा सकता है।

$('#update-box').load('url.php', {data: "something"});
$('#update-box').load('url.php', "data=something");

यदि .लोड को कॉलबैक विधि के साथ कहा जाता है, तो सर्वर से अनुरोध एक पोस्ट होगा

$('#update-box').load('url.php', {data: "something"}, function(resolve){
    //do something
});

अजाक्स पोस्ट:

समाधान 1:

$.post('url.php', 
    {date1Name: data1Value, date2Name: data2Value},  //data to be posted
    function(data){
        $('#update-box').html(data);
    }
);

समाधान 2:

$.ajax({
    type: 'Post',
    url: 'url.php',  
    data: {date1Name: data1Value, date2Name: data2Value}  //data to be posted
}).done(function(data){
    $('#update-box').html(data);
}).fail(function(jqXHR, textStatus){
    alert('Error occured: ' + textStatus);
});

अजाक्स पोस्ट JSON:

var postData = {
    Name: name,
    Address: address,
    Phone: phone
};

$.ajax({
     type: "POST",
     url: "url.php",
     dataType: "json",
     data: JSON.stringfy(postData),
     success: function (data) {
         //here variable data is in JSON format
     }
 });

अजाक्स जाओ JSON:

समाधान 1:

$.getJSON('url.php', function(data){
    //here variable data is in JSON format
});

समाधान 2:

 $.ajax({
      type: "Get",
      url: "url.php",
      dataType: "json",
      data: JSON.stringfy(postData),
      success: function (data) {
          //here variable data is in JSON format
      },    
      error: function(jqXHR, textStatus){
          alert('Error occured: ' + textStatus);
      }
  });

अजाक्स एबॉर्ट एक कॉल या अनुरोध

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

// अनुरोध को मार डालो

xhr.abort()

अजाक्स फ़ाइल अपलोड

1. एक सरल पूर्ण उदाहरण

हर बार एक नई फ़ाइल के चयन के बाद हम उपयोगकर्ता द्वारा चुनी गई फ़ाइलों को अपलोड करने के लिए इस नमूना कोड का उपयोग कर सकते हैं।

<input type="file" id="file-input" multiple>

var files;
var fdata = new FormData();
$("#file-input").on("change", function (e) {
    files = this.files;

    $.each(files, function (i, file) {
        fdata.append("file" + i, file);
    });

    fdata.append("FullName", "John Doe");
    fdata.append("Gender", "Male");
    fdata.append("Age", "24");

    $.ajax({
        url: "/Test/Url",
        type: "post",
        data: fdata, //add the FormData object to the data parameter
        processData: false, //tell jquery not to process data
        contentType: false, //tell jquery not to set content-type
        success: function (response, status, jqxhr) {
            //handle success
        },
        error: function (jqxhr, status, errorMessage) {
            //handle error
        }
    });
});

अब इसे नीचे तोड़ते हैं और भाग का निरीक्षण करते हैं।

2. फ़ाइल इनपुट्स के साथ कार्य करना

यह एमडीएन दस्तावेज़ (वेब अनुप्रयोगों से फ़ाइलों का उपयोग करना) फ़ाइल इनपुट को संभालने के तरीके पर विभिन्न तरीकों के बारे में एक अच्छा पढ़ा है। इन तरीकों में से कुछ का उपयोग इस उदाहरण में भी किया जाएगा।

फ़ाइलों को अपलोड करने से पहले, हमें सबसे पहले उपयोगकर्ता को उन फ़ाइलों को चुनने का तरीका देना होगा, जिन्हें वे अपलोड करना चाहते हैं। इस उद्देश्य के लिए हम एक file input उपयोग करेंगे। multiple संपत्ति एक से अधिक फ़ाइलों का चयन करने की अनुमति देती है, यदि आप चाहते हैं कि उपयोगकर्ता एक बार में एक फ़ाइल का चयन कर सके तो आप इसे हटा सकते हैं।

<input type="file" id="file-input" multiple>

हम फाइलों को पकड़ने के लिए इनपुट change event का उपयोग करेंगे।

var files;
$("#file-input").on("change", function(e){
    files = this.files;
});

हैंडलर फ़ंक्शन के अंदर, हम फाइलों को अपने इनपुट की संपत्ति के माध्यम से एक्सेस करते हैं। यह हमें एक FileList देता है, जो ऑब्जेक्ट की तरह एक सरणी है।

3. फॉर्मडाटा बनाना और भरना

अजाक्स के साथ फाइल अपलोड करने के लिए हम फॉर्मडाटा का उपयोग करने जा रहे हैं।

var fdata = new FormData();

FileList जो हमने पिछले चरण में प्राप्त किया है वह ऑब्जेक्ट की तरह एक सरणी है और लूप और jQuery.each के लिए लूप सहित विभिन्न तरीकों का उपयोग करके इसे पुनरावृत्त किया जा सकता है। हम इस उदाहरण में jQuery के साथ चिपके रहेंगे।

$.each(files, function(i, file) {
  //...
});

हम अपने फॉर्मडेटा ऑब्जेक्ट में फाइलों को जोड़ने के लिए फॉर्मडटा के एपेंड विधि का उपयोग करेंगे।

$.each(files, function(i, file) {
  fdata.append("file" + i, file);
});

हम अन्य डेटा भी जोड़ सकते हैं जिसे हम उसी तरह भेजना चाहते हैं। मान लीजिए कि हम उपयोगकर्ता से प्राप्त कुछ व्यक्तिगत जानकारी को फाइलों के साथ भेजना चाहते हैं। इस जानकारी को हम अपने फॉर्मडटा ऑब्जेक्ट में जोड़ सकते हैं।

fdata.append("FullName", "John Doe");
fdata.append("Gender", "Male");
fdata.append("Age", "24");
//...

4. अजाक्स के साथ फाइल भेजना

$.ajax({
    url: "/Test/Url",
    type: "post",
    data: fdata, //add the FormData object to the data parameter
    processData: false, //tell jquery not to process data
    contentType: false, //tell jquery not to set content-type
    success: function (response, status, jqxhr) {
        //handle success
    },
    error: function (jqxhr, status, errorMessage) {
        //handle error
    }
});

हम processData और contentType प्रॉपर्टी को false सेट false । ऐसा इसलिए किया जाता है ताकि फाइलों को सर्वर पर भेजा जा सके और सर्वर द्वारा सही तरीके से संसाधित किया जा सके।