Insert Data in PHP using jQuery AJAX without Page Refresh

In this article, we will see step by step that how we can Insert Data in PHP using jQuery AJAX without page refresh and then store into MySQL database.We will use the jQuery library for this purpose which has the complete inbuilt capabilities of the AJAX so we can view data post/insert data using jquery ajax without any page refresh.

Working:

I am going to explain the working of Insert Data in PHP using jQuery AJAX script here. We have HTML form made using bootstrap. It contains the three inputs student name , student rollno , student class. We have made a database table named “student” with the same field names.A user will enter the student data into the form and press insert data button.

Behind the scene, we have used JavaScript function in which we are using AJAX to send all this entered data to our server side script which is PHP.In the PHP file we wrote our script to save the values into the database and send back a success message response into the AJAX success function and then we displayed the message into the user interface.

Insert Data in PHP using jQuery AJAX phpcodify

Insert Data in PHP using jQuery AJAX

Step-1) Create MySQL Database

First of all, we will create our database.You can create the database from your PHPMyAdmin or you can use below SQL query.

 

Step-2) Create Table

Now we will create our table named “student”. It will have 4 fields student id, student name, student roll no, student class.

Insert some data into the table.

 

Step-3) Creating Database Connection

So we will create our connection with the database from the below script.In this script, we are using PDO a library for making a database connection.If you want to learn PDO you can Learn PDO CRUD.

Step-4) Bootstrap and jQuery Libraries

We have used Bootstrap and jQuery for this script so you have to include these two links at top of your HTML in the head section.

Bootstrap:

jQuery:

Step-5) Creating HTML Form

In this step, we will create our HTML UI form for Insert Data in PHP using jQuery AJAX Script.

 

Step-6) AJAX Code for Insert Data

This is the ajax code for getting the values from the HTML form and send all these values into the PHP script.

Step-7) Complete Code for Index.php

Step-8) PDO Script for Insert Data

Step-9) Complete PHP Script (Insert-Data.php)





download-code excel export data

 

 




Conclusion:

We have learned how to Insert Data in PHP using jQuery AJAX.So now you can easily insert data in PHP using jquery ajax by yourself just following these steps or you can download the source code of this insert data in PHP script and install it on your server.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.

  • cool

  • Aamir Syed

    Masha’Allah , very nice article ! Jazak Allah khair for sharing.

    • EhteshamMehmood

      Jazak Allah khair, Keep Learning !

  • John II Doe

    Nice job! regards!

Read previous post:
Pass Encrypted Messages Between PHP and Android Part 1

Today we are going to see how we can secure our apps.So for it, we will see how we can...

Close