4 Steps to Create AJAX CRUD Application in PHP & MySQL

4 Steps to Create AJAX CRUD Application in PHP & MySQL

This is simple AJAX CRUD application built with AJAX using PHP & MySQL. This tutorial is an extension to our simple crud application in PHP & MySQL. I’m using that same code for this application and adding ajax features.

Below is simple AJAX code snippet to send and receive data from PHP file. I’m sending data to PHP file using get method from HTML file. This submitted data will be displayed in HTML file without reloading HTML file.

Save this code as sample.html

Add this code inside head section. In this below code I’m sending some data to data.php file using get method. Upon getting successful data from data.php replacing it with result id inside our HTML file. All this will be done without reloading sample.html file.

Add this onclick function to button inside body section

Add this PHP code into data.php. This file is used to send and receive data in our HTML document.

In our main AJAX CRUD application using PHP & MySQL. I’m going to use this concept to send & receive the data in html & php files.

Other Articles in Learn AJAX

1. AJAX Read Operation in PHP & MySQL

Create a html file with the name index.html use this basic html with bootstrap css cdn files, bootstrap js cdn files & jQuery cdn file. I’m using CDN, if you want you can download it to local computer and use it.

Inside body section, use this form code to display form & submiting values to php file for CRUD operations.

Use the code in script tags from our first sample.html file

Right after form closing div in index.html add this table code.

Here using ajax.php file, I’m replacing tbody #result id with the output from ajax.php file.
Code of ajax.php file.

Create connect.php file for connecting to database in PHP. I’m already including this file in ajax.php file. If you haven’t created database table, follow this tutorial Simple CRUD Application in PHP & MySQL.

To update table data using ajax use this code to opening body tag. That is executing ajax function while onload.

After adding above line of code, you can see the difference. That is table body will be loaded after loading html file.

2. AJAX Create Operation in PHP & MySQL

Create Operation means inserting data into database table.
Add this onclick code to submit button.

Next get the input fields values using this below code

Add also pass the operation mode in ajax function using this line of code

Add this code right after defining the variables.

Send the varible values using get method

Add this code in ajax.php file to insert submitted data in database table.

3. AJAX Delete Operation in PHP & MySQL

First of all, add this onclick code to delete button in bootstrap popup modal inside ajax.php file.

Then add this code to delete record from database table.

4. AJAX Edit Operation in PHP & MySQL

For edit operation, I’m creating a new function ajax_edit. This function accepts two arguments one is operation same way we used for previous function and the anothe argument is id. which is used update the record.

This is simple code, I’m using from sample.html file.

Create one more file edit.php & use this code. This code will display form with data fetched from database table.

To load this edit.php file inside our index.html add the id #edit to div opening tag that is before opening form tag. I’ve added this in above index.html code.

Next executing ajax function after clicking on edit button in HTML table. Replace this code with edit anchor link.

Till now form is loading with values from database, next step is to update these submitted values in database.

Add this on click function to form submit button in edit.php file

Add this code in ajax_edit function in index.html file, to get input field values.

Add these variable values in get method for sending data to edit.php file.

Add this code in edit.php file.

Complete Code of AJAX CRUD Application in PHP & MySQL

If you are having any problem arragning above pieces of code, you can use this complete code.





[/sociallocker] If you have any problem let me know using comment form below.

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.