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.
Recommended jQuery Tutorials
Recommended:-jQuery HTML Append Prepend Example
Recommended:-jQuery Remove Text & Element From HTML
Recommended:-jQuery Add Remove Class on onClick
Recommended:-jQuery Set Checkbox Checked
Recommended:-jQuery Get Checkbox Checked Value
Recommended:-Get and Set Data Attribute Value in jQuery
Recommended:-jQuery Get Multiple Checkbox Value
Recommended:-jQuery Remove Attribute Disabled
Recommended:-jQuery Select Multiple HTML Elements
Recommended:-jQuery Get Data Id, Text Attribute Value
Recommended:-jQuery Set and Get width and height Of Element
Recommended:-jQuery Clone/Duplicate Html Elements
Recommended:-jQuery Wrap and Unwrap Multiple Html Element
Recommended:-jQuery Ajax Get Method with Example
Recommended:-jQuery Filter Selection of HTML Elements
Recommended:-jQuery Find Sibling with id, Class
Recommended:-jQuery scrollTop Method