AJAX PHP Post Request

This example fetches the requested HTML snippet and inserts it on the page.

Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.

The jqXHR Object

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.post() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The jqXHR.done() (for success), jqXHR.fail() (for error), and jqXHR.always() (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the jqXHR Object section of the $.ajax() documentation.

The Promise interface also allows jQuery's Ajax methods, including $.get() , to chain multiple .done() , .fail() , and .always() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

Источник

AJAX PHP Post Request With Example

In this article, we will see how to send an AJAX PHP post request with an example. Generally, a POST request is used to send the data to a PHP file then we can use that data, process it like validation checking, data saving, mail sending, etc, and then PHP will send the response with the message, data, response code, etc.

Why We Use AJAX?

AJAX is used to perform various HTTP requests like POST, GET, PUT, etc. AJAX is used to update the part of the webpage without reloading a page. Overall, it will improve the user experience.

For example, Let’s say we are using jQuery AJAX Post request for login form so in this, we will send username and password to the PHP file. In that file, we will check the username and password into the database and allow login users or show them an error message in the login form.

Where We Can Use AJAX?

We can use AJAX everywhere on the website. Let’s see very useful places where AJAX is used.

1. Login form to validate the user and redirect the user if successful or show messages on the form
2. Registration form to insert data into the database, email and show server-side validations, etc
3. Sending contact us form’s email and show success or error message on the form
4. AJAX is used in data-tables to fetch only required data to overcome load on servers
5. For the pagination of posts, tables, load more button effect, etc.
6. Autocomplete search like you type Au and it brings the lists with Au words
7. To create filters like pricing filters, colors filters, category filters, etc

Use jQuery $.ajax() Method To Send HTTP Request

Different users follow different ways to send data using AJAX. Let’s see how to do that.

1. AJAX: Send Data Using Object Parameters

To send in parameters, you need to create a JavaScript object. So to do that you need to get values using .val() function and create an object using it something like below.

But what if you have a large number of fields in your form in that case you need to submit the whole form data one by one but that isn’t a good idea right? In that case, use the second option after this point.

let firstName = $('#firstname').val(), lastName = $('#lastname').val(), message = $('#message').val(); $.ajax(< method: "POST", url: 'file.php', data: < firstname: firstName, lastname: lastName, message: message >, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

2. AJAX: Send Whole Form Data Using serialize() & serializeArray() Methods

serialize() method creates data in query string format so due to that submitting a file with this function won’t work.

serializeArray() method creates data in JavaScript array objects.

Suppose, you have a form and you want to submit the whole form data using AJAX then you can do something like the below:

let formData = $('#myForm').serialize(); /* Or use serializeArray() function same as serialize() let formData = $('#myForm').serializeArray(); */ $.ajax(< method: "POST", url: 'file.php', data: formData, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

3. AJAX: Send Whole Form Data Using FormData() methods

The FormData() is a constructor that creates a new FormData object as below:

let myForm = document.getElementById('myForm'); let formData = new FormData(myForm); $.ajax(< method: "POST", url: 'file.php', data: formData, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

If you want to append extra key-value pair in FormData() object then you can use obj.append(‘key’, ‘value’) function as below:

formData.append('action', 'insert');

4. User Registration Using AJAX PHP Post Request

In this example, we will submit a simple registration form using AJAX PHP Post request.

index.php

         body < color: #fff; background: #3598dc; font-family: "Roboto", sans-serif; >.form-control < height: 41px; background: #f2f2f2; box-shadow: none !important; border: none; >.form-control:focus < background: #e2e2e2; >.form-control, .btn < border-radius: 3px; >.signup-form < width: 400px; margin: 30px auto; >.signup-form form < color: #999; border-radius: 3px; margin-bottom: 15px; background: #fff; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px; >.signup-form h2 < color: #333; font-weight: bold; margin-top: 0; >.signup-form hr < margin: 0 -30px 20px; >.signup-form .form-group < margin-bottom: 20px; >.signup-form input[type="checkbox"] < margin-top: 3px; >.signup-form .row div:first-child < padding-right: 10px; >.signup-form .row div:last-child < padding-left: 10px; >.signup-form .btn < font-size: 16px; font-weight: bold; background: #3598dc; border: none; min-width: 140px; >.signup-form .btn:hover, .signup-form .btn:focus < background: #2389cd !important; outline: none; >.signup-form a < color: #fff; text-decoration: underline; >.signup-form a:hover < text-decoration: none; >.signup-form form a < color: #3598dc; text-decoration: none; >.signup-form form a:hover < text-decoration: underline; >.signup-form .hint-text < padding-bottom: 15px; text-align: center; >#responseContainer  
 
Sign Up
 
Please fill in this form to create an account!