Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Simple PHP jQuery Ajax Insert Update Delete using MySQLi

Today, We want to share with you Simple PHP jQuery Ajax Insert Update Delete using MySQLi.
In this post we will show you PHP – Simple CRUD With Ajax/MySQLi, hear for live table add edit delete using ajax jquery in php mysql we will give you demo and example for implement.
In this post, we will learn about Ajax Add & Delete MySQL records using jQuery & PHP with an example.

Making the database connection

first of all simple database connection using PHP simple copy and paste this source code db_connect.php

Making The Interface

main file All the HTML and PHP Form Interface Like name as a index.php.

	
		
		
	

	
	

	

		
PHP - Simple CRUD With Ajax/MySQLi
		

		

			

				Client Name
				
				Lastname
				
			
			

			

				location
				
			
			

			 Save Update
		
		

		

			

				

					
Client Name
					
Location
					
Action
				
			
			

		
	

save_query.php

This source code will save all the record the data input form to the mysql database PHP server side.

query("INSERT INTO `client_mst` VALUES('', '$clientfname', '$clientlname', '$location')");
?>

data_query.php

This source code will client_row and displaying the data from the get all the record in database.

query("SELECT * FROM `client_mst`");
		while($client_row = $query->fetch_array()){
			echo
				"
					
						".$client_row['clientfname']." ".$client_row['clientlname']."
						".$client_row['location']."
						 Edit |  Delete
					
				";
 
		}
	}
 
?> 

delete_query,php

This source code will delete particuler record the data from the sql database.

query("DELETE FROM `client_mst` WHERE `client_id` = '$id'");
?>

client_edit.php

first of all each person edit this record via users id to get and select query using PHP in MySQLi

query("SELECT * FROM `client_mst` WHERE `client_id` ='$id'");
		$client_row = $query->fetch_array();
 
		$array = array(
			'client_id' => $client_row['client_id'],
			'clientfname' => $client_row['clientfname'],
			'clientlname' => $client_row['clientlname'],
			'location' => $client_row['location']
		);
 
		echo json_encode($array);
	}
?>

client_update.php

Server side source code for All the Data update queryin Mysql using PHP

query("UPDATE `client_mst` set `clientfname` = '$clientfname', `clientlname` = '$clientlname', `location` = '$location' WHERE `client_id` = '$id'");
	}
 
?>

Making The Ajax Funcition

Save the Custom Javscript File Like name as a script.js inside the all the libs in js folder.

$(document).ready(function(){
	var client_id;
 
	RetriveClientData();
 
	$('#update').hide();
 
	$('#save').on('click', function(){
		if($('#clientfname').val() == "" || $('#clientlname').val() == "" || $('#location').val() == ""){
			alert("Hello World");
		}else{
			var clientfname = $('#clientfname').val();
			var clientlname = $('#clientlname').val();
			var location = $('#location').val();
 
			$.ajax({
				url: 'save_query.php',
				type: 'POST',
				data: {
					clientfname: clientfname,
					clientlname: clientlname,
					location: location
				},
				success: function(data){
					 $('#clientfname').val('');
					 $('#clientlname').val('');
					 $('#location').val('');
					 RetriveClientData();
				}
			});
		}
 
	});
 
	function RetriveClientData(){
		$.ajax({
			url: 'data_query.php',
			type: 'POST',
			data: {
				res: 1
			},
			success: function(response){
				$('#data').html(response);
			}
		})
	}
 
	$(document).on('click', '.delete', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'delete_query.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(data){
				RetriveClientData();
				$('#update').hide();
				$('#save').show();	
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
			}
		});
	})
 
	$(document).on('click', '.edit', function(){
		var id = $(this).attr('name');
 
		$.ajax({
			url: 'client_edit.php',
			type: 'POST',
			data: {
				id: id
			},
			success: function(response){
				var fetchArr = jQuery.parseJSON(response);
 
				client_id = fetchArr.client_id;
 
				$('#clientfname').val(fetchArr.clientfname);
				$('#clientlname').val(fetchArr.clientlname);
				$('#location').val(fetchArr.location);
 
				$('#update').show();
				$('#save').hide();	
			}
		})
	});
 
	$('#update').on('click', function(){
		var clientfname = $('#clientfname').val();
		var clientlname = $('#clientlname').val();
		var location = $('#location').val();
 
 
		$.ajax({
			url: 'client_update.php',
			type: 'POST',
			data: {
				id: client_id,
				clientfname: clientfname,
				clientlname: clientlname,
				location: location
			},
			success: function(){
				RetriveClientData();
				$('#clientfname').val('');
				$('#clientlname').val('');
				$('#location').val('');
 
				alert("Client Details Successfully Updated!");
 
				$('#update').hide();
				$('#save').show();	
 
				client_id = "";
			}
		});
	});
});

There you have step by step done it we successfully made a Simple webapplication Like as a insert update and delete CRUD With Ajax/MySQLi using PHP Example.

We hope you get an idea about PHP – Simple CRUD With Ajax/MySQLi
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.