← Back to jQuery Course | Chapter 9: AJAX Basics | Lesson 4 of 7

post() से HTTP POST

post method server को data भेजता है। यह आमतौर पर कुछ create या submit करते समय इस्तेमाल होता है।

In this page:

  1. post() क्या है?
  2. कई Values भेजना
  3. POST Success Callback
  4. POST Error Handling
  5. एक छोटा POST Project
Syntax
javascript 
$.post(url, data, function (response) {
  // handle response
}, dataType);

post() क्या है?

$.post() एक POST-style AJAX request बनाने का shorthand है, जो अक्सर server को नया data भेजने के लिए इस्तेमाल होता है, जैसे एक record बनाना या एक form submit करना।

उदाहरण: What is post()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.post("data.php", {name: "Alice"}, function(response) {
        $("#output").text(JSON.stringify(response));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

कई Values भेजना

आप post() के दूसरे argument के रूप में एक plain object pass करके कई values एक साथ भेज सकते हैं, और jQuery आपके लिए उन्हें request body में encode कर देता है।

उदाहरण: Sending Multiple Values

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.post("data.php", {name: "Alice", email: "[email protected]"}, function(response) {
        $("#output").text(JSON.stringify(response));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

POST Success Callback

एक successful POST request के बाद, callback server द्वारा भेजे गए किसी भी response को receive करता है, जिसे आप एक confirmation message दिखाने या page update करने के लिए इस्तेमाल कर सकते हैं।

उदाहरण: POST Success Callback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="status"></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.post("data.php", {name: "Alice"}, function(response) {
        $("#status").text("Saved: " + response.message);
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

POST Error Handling

post() call पर .fail() chain करना आपको एक ऐसी request handle करने देता है जो succeed नहीं होती, user को informed रखते हुए बजाय एक failed submission को अनदेखे छोड़ने के।

उदाहरण: POST Error Handling

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.post("data.php", {name: "Alice"}).done(function(response) {
        $("#output").append($("<div>").text(JSON.stringify(response)));
      }).fail(function() {
        $("#output").append($("<div>").text("Submission failed"));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

एक छोटा POST Project

POST form data भेजने, नए records बनाने, और आम तौर पर user input submit करने के लिए उपयोगी है -- ऐसा कोई भी case जहाँ request का मतलब server-side कुछ बदलना है।

उदाहरण: Small POST Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <form id="myForm"><input id="name" value="Alice"></form>
    <button id="submitBtn">Save</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#submitBtn").on("click", function() {
        $.post("data.php", {name: $("#name").val()}, function(response) {
          $("#output").append($("<div>").text("Saved: " + JSON.stringify(response)));
        });
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

get() से HTTP GET · getJSON() से JSON Parse करना · load() से Content Load करना · getScript() से Scripts Load करना

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. $.post("save.php?name=Ann") जैसे URL में data भेजना, जबकि $.post का मतलब इसे दूसरे argument के through body में भेजना है: $.post("save.php", { name: "Ann" })।
  2. यह भूल जाना कि callback सिर्फ एक successful response पर चलता है, इसलिए एक failed POST को एक chained .fail() चाहिए।
  3. repeated clicks के through बार-बार वही POST भेजना, duplicate records बनाते हुए, क्योंकि request चलने के दौरान button disable नहीं है।
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson HTTP GET with get() Next Lesson → Parsing JSON with getJSON()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.