Asynchronous JavaScript programming is really gaining popularity day by day, so in php application development everyone wants to use Asynchronous call wherever possible.
Here you learn How to submit php ajax from using jQuery, php ajax post using jquery step by step, in order to make ajax call from php script, we have to use jquery, so you must learn jquery first ( if you are not familiar).
In this tutorial you will learn how to make Ajax call in Php application, Ajax is very common term for web application developer, but if you are completely new to web development world then you may have a question what exactly Ajax is ?
AJAX stands for Asynchronous JavaScript, which allows developer to make a server side call from web page without reloading then entire page again, that means using Ajax in php application you can send data to server side and pull data from backend without even rending the entire page again, using Ajax you can create a good user experience for your web application user, Ajax call is very smooth and faster for getting data from server
Ajax call can fetch data from server in either form of XML or JSON
You don’t need any previous knowledge to understand Ajax call, but if you are familiar with following scripting, it will be easy to understand
Here is the standard structure of JavaScript Ajax post in Php.
<script> $.ajax( 'make-ajax-call.php', { success: function(data) { alert('AJAX call successful!'); alert('response from the server' + data); }, error: function() { alert('There was some error response from AJAX call!'); } } ); </script>
Now let’s look at another example of submitting form using Ajax and jquery in php code.
<script src="jquery-1.9.1.js"></script> <script> $(function () { $('#formSubscribe').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'post-form.php', data: $('#formSubscribe').serialize(), success: function () { alert('form submitted successfully'); } }); }); }); </script> </head> <body> <form id="formSubscribe"> Name: <input name="txtName" id="txtName"><br> Email: <input name="txtEmail" id="txtEmail"><br> <input name="submit" type="submit" value="Submit"> </form> </body>
Note: in above code, e.preventDefault()
method will block default click handling
(it has nothing to do with Ajax form submit, you can take off that line of code), learn more about how preventDefault works