jQuery Ajax Post() Method Example

What is jQuery ajax $.post method – How to use this ajax post with example. In this ajax post method tutorial, We are going to show how to use this method with example from scratch.

Let’s see jQuery Ajax $.Post

What is jQuery Ajax $.Post Method ?

The jQuery ajxa post() method sends asynchronous http POST request from the server and get the response from the server without reloading the whole web page.

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

Syntax of Ajax post() Method

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

Parameters

  • 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 Ajax Post

This example will demostrate you how to send data to the server along with the request using 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.tutsmake.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>                            

Output

Ajax POST Request Example






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.

Look At here

The $.get & $.post methods are mainly work to sent the client side data to server side using http requests. The main difference in both methods is that, ajax $ .get method has sent parameters in query string and ajax $. post method has sent parameters in post body.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *