How to Submit a Form Without Page Redirect Using jQuery Ajax and PHP?

jQuery Ajax POST Example with PHP

Introduction:
Submitting forms typically triggers a browser redirect. This article demonstrates how to capture form data using jQuery Ajax and send it to a PHP script for processing without causing a redirect.

jQuery Ajax Implementation:
To handle form submission using jQuery Ajax, follow these steps:

1. Prevent the default form submission using event.preventDefault().
2. Serialize the form data using $form.serialize().
3. Disable form inputs while the Ajax request is pending.
4. Use the $.ajax() method to send the serialized data to the PHP script.
5. Define callback handlers for success, failure, and completion using request.done(), request.fail(), and request.always().
6. Reenable form inputs after the Ajax request completes.

PHP Script Integration:
In the PHP script that processes the submitted data (form.php in our example):

1. Access the posted values using the global variable $_POST.
2. Ensure proper sanitization of posted data to prevent malicious code.

Additional Notes:

• jQuery 1.8 and later deprecates .success(), .error(), and .complete(). Use .done(), .fail(), and .always() instead.
• You can also use the shorthand .post() in place of .ajax() in the JavaScript code.
• The provided code works with jQuery 1.8 and later, as well as previous versions down to jQuery 1.5.

The above is the detailed content of How to Submit a Form Without Page Redirect Using jQuery Ajax and PHP?. For more information, please follow other related articles on the PHP Chinese website!