Pass Data to PHP using AJAX without Page Load

Yesterday I got one request from our blog reader that he want to learn How to Pass Data to PHP using AJAX. So today in this tutorial I will write one script in which I will explain how someone can send data to PHP using AJAX so there will be no page load.

Working :

In this Pass Data to PHP using AJAX script, we have an HTML form in which we have one textbox in which a user will enter some text for sending to the server side PHP file. Here in this script, we will use onblur function. On this onblur, we will call one JavaScript function passData() in this method we will write our AJAX code through we will send our form value into the PHP file and on successful we will show one message to the user that your data has been sent to PHP using AJAX.

 

pass data to php using ajax without page load

Follow these steps

1-HTML form For Pass Data to PHP using AJAX

Here in this code, we have made a form with a text box, on this text input onblur method we will call a JS method in which we will hold the value.

 

2-AJAX Code (Getting and Passing Data with Ajax)

This is AJAX code in this we will get the input value from the textbox.

  • type
  • url
  • data
  • success

These are some important points which I explained below.

Type:  The type is the way/method we send our data to the PHP file. If we use POST then on the PHP side, we will use the $_POST[] to get the value. If we use GET then we will use $_GET[] method.

Url:  URL is basically the file where we want to send the data.In our script it is pass-data.php.

Data:  The data will store our input data.In our script, var dataString = 'data_to_be_pass=' + name;This means that if we use $_POST[‘data_to_be_pass’] in the PHP file, we will get the value of the name variable which we get from the text field.

Success: If all the things succeeded then this success will work and we will display a message we get from the PHP file.

 

 

3-Complete Index.php Code

This is the complete code for pass data to php using ajax script which include the html form and ajax codes.

4-pass-data.php file

This is the PHP file in which we will recieved the data which has been sent through AJAX call, we will send back a message to the ajax code on successful recieveing that we have recieved through json_encode() method.

Conclusion:

So today we have explained that how you can pass data to PHP using ajax. Now you can make your own script just following these simple steps. If you have any issues or suggestions regarding this tutorial you can comment below.If you find this information useful, remember to share it on your social network. If you have any specific concerns/doubt about this article you can comment below and let us know.Enjoy coding.

 




download-code excel export data     

 




  • Zaid Butt

    This is what I am trying to find. Finally I found on your website. Thanks a lot.

  • Emmanuel Okezie Ogbonna

    my question is on this tutorial you made “Android Registration and Login System using PHP,MySQL and Retrofit Square API” i can’t find any where to comment on that tutorial, my question is i tried testing the rest with postman but it keeps saying “Unexpected ‘e'” any help please.

Read previous post:
CodeIgniter Login Registration System using MySQL Bootstrap

User login and registration system are necessary nowadays for any advanced dynamic web application, So today In this tutorial we...

Close