jQuery Ajax Post Example

jQuery ajax post example; Through this tutorial, i am going to show you what is jQuery ajax $.post method an uow to use this ajax post data request with an example.

jQuery Ajax Post Request Example

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.

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 jQuery Ajax Post Request

Example for 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.Laratutorials.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>

Explanation of jQuery Ajax Post Request Example

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.

jQuery Ajax Post Request Example

Syntax of jQuery Ajax Post() Method

Parameters of jQuery Ajax Post() Method

Example jQuery Ajax Post Request

Explanation of jQuery Ajax Post Request Example

Recommended jQuery Tutorials

Leave a Comment Cancel reply