HTTP POST with post()
In this page:
What is post()?
$.post() is a shorthand for making a POST-style AJAX request, most often used to send new data to a server, such as creating a record or submitting a form. Unlike GET, POST data isn't appended to the URL, which suits sending larger or more sensitive payloads.
Example: What is post()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.post("data.php", {name: "Alice"}, function(response) {
console.log(response);
});
</script>
</body>
</html>Sending Multiple Values
You can send several values together by passing a plain object as post()'s second argument, and jQuery encodes them into the request body for you. The server then receives them as regular request data, the same as if a form had been submitted normally.
Example: Sending Multiple Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.post("data.php", {name: "Alice", email: "[email protected]"}, function(response) {
console.log(response);
});
</script>
</body>
</html>POST Success Callback
After a successful POST request, the callback receives whatever response the server sends back, which you can use to show a confirmation message or update the page with newly created data. This confirms to the user that their submission was actually processed.
Example: POST Success Callback
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="status"></div>
<script>
$.post("data.php", {name: "Alice"}, function(response) {
$("#status").text("Saved: " + response.message);
});
</script>
</body>
</html>POST Error Handling
Chaining .fail() onto a post() call lets you handle a request that doesn't succeed, keeping the user informed instead of leaving a failed submission unacknowledged. This matters more for POST than GET, since a silently-failed POST could mean lost data the user thinks was saved.
Example: POST Error Handling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.post("data.php", {name: "Alice"}).done(function(response) {
console.log(response);
}).fail(function() {
console.log("Submission failed");
});
</script>
</body>
</html>Small POST Project
POST is useful for sending form data, creating new records, and submitting user input generally -- any case where the request is meant to change something on the server rather than just read from it.
Example: Small POST Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input id="name" value="Alice"></form>
<button id="submitBtn">Save</button>
<script>
$("#submitBtn").on("click", function() {
$.post("data.php", {name: $("#name").val()}, function(response) {
console.log("Saved:", response);
});
});
</script>
</body>
</html>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: