jQuery Ajax Post Data Example

July 11, 2022July 11, 2022 Rabiya 0 Comments

jQuery ajax post data example; Through this tutorial, you will learn what is jQuery ajax $.post method and how to use this ajax post data.

The jQuery ajax post() method sends an asynchronous HTTP POST request from the server and gets the response from the server without reloading the whole web page.

In simple words, the ajax post() method allow to sending an asynchronous HTTP POST request to receive or send the data from the web server without reloading the whole web page.

jQuery Ajax Post Data Example

See the following example of jQuery ajax post method with syntax, parameters, etc.

Syntax of jQuery Ajax post() Method

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

Parameters of jQuery Ajax post() Method

url: This is the required parameter. Url is adress where, you want to send & retrieve the data.
data: This is used to sent some to the server with request.
success : This function to be executed when request succeeds.
dataType: dataType is a response content or data expected from the server.

Example of jQuery ajax post data request with parameters

This example will demonstrate you how to send data to the server along with the request using the ajax post method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax POST Request Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style>  
.formClass
{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
} 
</style> 
<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
 
        event.preventDefault();
         
        var action = $(this).attr("action");
 
        var formData = $(this).serialize();
         
        $.post(action, formData, function(data){
 
            $("#output").html(data);
        });
    });
});
</script>
</head>
<body>
    <div class="formClass">
    <form action="https://www.CodeOne.com/Demos/html/ajax-post-method.php">
        <label>Name </label><br>
        <input type="text" name="name" required="" placeholder="Please enter name"> <br><br>
        <label>Email</label><br>
        <input type="email" name="email" required="" placeholder="Please enter email">
        <br><br>
        <button type="submit">Submit</button>
    </form>
    <div id="output"></div>    
    </div>
</body>
</html>

Example demonstration

In this above ajax post() method example. The url parameter is first parameter of the post method and it help to send form data from the server using Http POST request.
The Next parameter data is a data to submit form data in JSON format, In pair of key value.
Next parameter “success” , When the HTTP POST request is succeeds.
The dataType parameter is a used to receive the response from the server.