In this tutorial, we will learn how to insert data into the MySQL Database using ajax,php & MYSQL without refreshing the page .

I have shared the basic and best example so that you can easily insert the data using Ajax, PHP and MySQL. I have explained step by step in a simple way . So that you can easily understand and implement easily

Insert Data Using Ajax in PHP

Before inserting data using ajax in php, you should have basic understanding of the following topics –

  1. HTML
  2. jQuery Ajax
  3. PHP
  4. MySQL

Before getting started, you have to create the following folder structure.

ajax-insert-data 

  |__db.php

  |__ajax-code.js

  |__php-code.php

  |__index.php

Step-1: Create MySQL Database and Table

 Create database and table with the following name –

 Database Name = anyhow

 Table Name = employees 

Copy to Clipboard

Step 2 – Create MySQL Database Connection

Now, Create a MYSQL database connection with php by using the following details

  1. Hostname – localhost
  2. Database username – root
  3. Database password – empty
  4. Database name – anyhow

File Name = db.php

Copy to Clipboard

after creating a connection with database, the next step is 

Step 3 – Write HTML Code to Create a Form 

Now write the following HTML code to create a form to insert using the post method. 

File Name= index.php

Copy to Clipboard

Explanation-   

 follow the given step to create an HTML form – 

  • When you create a html form you need to include jQuery CDN to use or execute jQuery ajax code 
  • After that you need to include your external ajax code file ajax-code.js In this file we will write ajax code which will insert data without reloading the page 
  • Form id must be ”employeesForm”
  •  Name of first name input should be =”first_name” 
  • Name of last name input should be =”last_name” 
  • Name of salary input should be =”salary” 
  • Button – we need to add a button to submit the form data.

Step-4 : Write Ajax code to Insert Data

File Name = ajax-code.js

Copy to Clipboard

Explanation  

Now by following the steps given below, you can insert the data without refreshing the page. 

  • Now we will implement the submit event in the HTML form with the id #employeesForm  
  • Now we will submit the form data without reloading the page with e.preventDefault() 
  • Now we must send a post request and insert data into the database through php code. 
  • Now we must mention the URL php-code.php  This URL contains PHP code. 
  • And we will display the success message and error message in the div id The id =#msg. 

Step 5 –  Write PHP Code to insert Data

File Name = php-code.php 

Copy to Clipboard

Explanation  

  • First of all, Include the db.php for database connection 
  • Assign database connection $conn to the $db 
  • Get the first name, last name & salary using $_POST[] method 
  • Check the first name, last name & salary is empty or not using empty() method and if conditions 
  • If the first name, last name & salary is not empty then write the insert query within the if-block of statement. 
  • If insert query executed successfully then print the success message