jQuery post

jQuery post
Techiio-author
Written by Sagar RabidasDecember 18, 2021
10 min read
jQuery
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss the jQuery post.

jQuery:-

jQuery is a small, lightweight, and fast JavaScript library. It is cross-platform and supports different types of browsers. It is also referred to as? write less do more? because it takes a lot of common tasks that require many lines of JavaScript code to accomplish and binds them into methods that can be called with a single line of code whenever needed. It is also very useful to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery is a fast, small, cross-platform, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like HTML document traversal and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of different types of browsers.

blogpost

jQuery post:-

jQuery post method requests data from the server using HTTP post request. This method sends an asynchronous request to the server to submit the data to the server and get the response. jQuery.post() method returns an XML HTTP request object. This method is an AJAX method and is used to call server pages like .aspx or .php. POST method is identical to GET method in jQuery, using $.get() or $.post(), depends on the server-side requirements. In case of a large amount of data being transmitted, for ex., form data, a POST request is to be used instead of a GET request as getting has a strict limit on data transfer to and fro on the server.

Syntax

The basic syntax for the jQuery post request can be written as below:

jQuery.post( url [, data ] [, success ] [, dataType ] )

Parameters

  1. URL: Required parameter with data type String containing the request URL to which the request has to be sent or request from where data has to be received.
  2. data: JSON data, which is to be sent to the server. An optional parameter with data type as Plain Object or a String that is sent to the server with the request URL.
  3. success: It is an optional parameter, a callback function that is executed if the request method succeeds or when data is loaded successfully. Mandatory parameter if dataType is provided, but can also take null value in such cases. Can also be written a function(data, status,xhr), data contains the resulting data, status contains the status of the request processed; may it be a timeout, success, parsing error, etc., and xhr contains the XMLHttpRequest object.
  4. dataType: It is an optional parameter and represents the type of data(string) to be returned as a callback function; response can be in the form of XML, script, JSON, HTML, jsonp or text.
  • XML being an XML document.
  • The script runs as JavaScript and returns plain text.
  • JSON runs as JSON and returns a JavaScript object.
  • HTML, plain text.
  • Jsonp loads a JSON block using JSONP and adds a callback to the request URL specifying the callback. Text, plain text string.

In a simple format, jQuery post syntax can also be written as:

$.post( URL, data, callback);

Let us see How this jQuery is.post() method used?

jQuery script has to be used while implementing, i.e., can be of any version:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Examples of jQuery post

Given below are the examples mentioned:

Example #1

jQuery post with simple click functionality.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#jQuerybutton').click(function(){
// request URL
$.post('/jquery/submitData',
// data submitted to POST request
{ myData: 'Data has been sent successfully using jQuery POST' },
// callback function on success
function(data, status, jqXHR) {
$('p').append('sent status: ' + status + ', data sent: ' + data);
});
});
});
</script>
</head>
<body>
<h1> jQuery post() method with a simple click function
</h1>
<input type="button" id="jQuerybutton" value="POST your request here" />
<p>
</p>
</body>
</html>

Example #2

jQuery post method.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery POST Request using AJAX</title>
<style>
label{
display: block;
margin-bottom: 15px;
color: red
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(eventObj){
eventObj.preventDefault();
var actionBtn = $(this).attr("action");
var formValue = $(this).serialize();
$.post(actionBtn, formValue, function(empdata){
$("#resultData").html(empdata);
});
});
});
</script>
</head>
<body>
<form action="/php/empComment.php">
<label>Your Employee Name: <input type="text" name="empname"></label>
<label>Comments for improvement: <textarea cols="25" name="empcomment"></textarea></label>
<input type="submit" value="Send Here">
</form>
<div id="resultData"></div>
</body>
</html>
In empComment.php
<?php
$name = htmlspecialchars($_POST["empname"]);
$comment = htmlspecialchars($_POST["empcomment"]);
echo "Hi, $empname. Your comment has been received successfully." . "";
echo "Here's the comment what you've entered: $empcomment";
?>

Example #3

jQuery post method || Submit Form.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery POST method||Submit Form page</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("form").on("submit", function(eventObj){
eventObj.preventDefault();
var htmlFormValues= $(this).serialize();
var submitAction = $(this).attr("action");
$.post(submitAction, htmlFormValues, function(formData){
$("#formResult").html(formData);
});
});
});
</script>
</head>
<body>
<form action="/php/formProcess.php">
<p>
<label>Your Name:</label>
<input type="text" name="name">
</h3>
<p>
<label>Please specify Gender:</label>
<label><input type="radio" value="male" name="gender"> Male</label>
<label><input type="radio" value="female" name="gender"> Female</label>
<label><input type="radio" value="transgender" name="gender"> Transgender</label>
</h3>
<p>
<label>Your Hobbies:</label>
<label><input type="checkbox" value="Reading Books" name="hobbies[]"> Reading Books</label>
<label><input type="checkbox" value="Driving" name="hobbies[]"> Driving</label>
<label><input type="checkbox" value="Music" name="hobbies[]"> Music</label>
<label><input type="checkbox" value="Dancing" name="hobbies[]"> Dancing</label>
<label><input type="checkbox" value="Sports(Indoors/ Outdoors)" name="hobbies[]"> Sports(Indoors/ Outdoors)</label>
</h3>
<p>
<label>Your Favorite Color:</label>
<select name="color">
<option>BLUE</option>
<option>YELLOW</option>
<option>GREEN</option>
<option>ORANGE</option>
<option>BLACK</option>
</select>
</h3>
<p>
<label>Any Suggestions/ Comments:</label>
<textarea name="comment"></textarea>
</h3>
<input type="submit" value="submit">
</form>
<div id="formResult"></div>
</body>
</html>
In formProcess.php
<h1>Here is the information submitted by you:</h1>
<h3>Name: <b><?php echo $_POST["name"] ?? ''; ?></b></h3>
<h3>gender: <b><?php echo $_POST["gender"] ?? ''; ?></b></h3>
<h3>Favorite Color: <b><?php echo $_POST["color"] ?? ''; ?></b></h3>
<h3>Hobbies: <b><?php if(isset($_POST["hobbies"])){ echo implode(", ", $_POST["hobbies"]); } ?></b></h3>
<h3>Comment: <b><?php echo $_POST["comment"] ?? ''; ?></b></h3>

Conclusion

We have visible the way it works, and its syntax in diverse paperwork explained all the required and non-obligatory parameters above. Examples solved right here will give you a top-level view of the way it is used to send the statistics to any of the documents detailed. An amazing instance of filing a shape record is proven, which sends its facts to a PHP report and shows the statistics despatched to the record.

jQuery
jQuery post
java script
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-author
Sagar Rabidas
Software Developer
Techiio-followerTechiio-followerTechiio-followerTechiio-followerTechiio-follower
+8 more
300 Blog Posts
14 Discussion Threads
Trending Technologies
15
Software40
DevOps46
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance