How to make CRUD system using AJAX
In this tutorial, I show you how to make CRUD system in AJAX.As you know ajax is used for update the webpage without refreshing the page.in other words,AJAX allows you to send and receive data asynchronously without reloading the web page. So it is fast.
Steps to create CRUD system
- Create database name `ajax` and table name `test` with column name (id,name and email)in wamp software.
- Create a new folder ajaxtut. Then download, Jquery file from here. Include this file into the ajaxtut folder and rename this file as jquery.
- Create a new file in ajaxtut folder, copy and paste the following code, save it as index.php .
<!doctype html>
<html>
<title>
ajax Crud System
</title>
<head>
<script src="jquery.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form action="" method="post" id="form1">
Name: <input type="text" name="name" id="name"/><br>
email: <input type="email" name="email" id="email"/><br>
<input type="submit" name="button" id="button" value="submit"/><br>
</form>
<div class="msg">
</div>
<div class="raw">
</div>
</body>
</html>
- Then create new file in ajaxtut folder,write the following code and save it as ajax.js.
$(document).ready(function(){
$("#form1").submit(function(){
event.preventDefault();
var name=$("#name").val();
var email=$("#email").val();
$.ajax({
type:'POST',
url:'data.php',
data:{name:name,email:email},
success:function(feedback){
$(".msg").html(feedback);
demo();
}
})
});
});
function demo(){
$.ajax({
type:'POST',
url:'data.php?store=showdata',
success:function(feedback){
$(".raw").html(feedback);
}
})
}
demo();
function delete_row(id)
{
$.ajax
({
type:'post',
url:'data.php',
data:{
delete_row:'delete_row',
row_id:id,
},
success:function(response) {
demo();
if(response=="success")
{
var row=document.getElementById("row"+id);
row.parentNode.removeChild(row);
}
}
});
}
function edit_row(id)
{
var name=document.getElementById("name_val"+id).innerHTML;
var email=document.getElementById("email_val"+id).innerHTML;
document.getElementById("name_val"+id).innerHTML="<input type='text' id='name_text"+id+"' value='"+name+"'>";
document.getElementById("email_val"+id).innerHTML="<input type='text' id='email_text"+id+"' value='"+email+"'>";
document.getElementById("delete_button"+id).style.display="none";
document.getElementById("edit_button"+id).style.display="none";
document.getElementById("save_button"+id).style.display="block";
}
function save_row(id)
{
var name=document.getElementById("name_text"+id).value;
var email=document.getElementById("email_text"+id).value;
$.ajax
({
type:'post',
url:'data.php',
data:{
edit_row:'edit_row',
row_id:id,
name_val:name,
email_val:email
},
success:function(response) {
if(response=="success")
{
document.getElementById("name_val"+id).innerHTML=name;
document.getElementById("email_val"+id).innerHTML=email;
document.getElementById("edit_button"+id).style.display="block";
document.getElementById("save_button"+id).style.display="none";
document.getElementById("delete_button"+id).style.display="block";
}
}
});
}
- Create new file in ajaxtut folder, write following code and save it as data.php .
<?php
$conn=mysqli_connect('localhost','root','','ajax');
if(isset($_POST['name']) && isset($_POST['email']))
{
$name=$_POST['name'];
$email=$_POST['email'];
$insert_query="INSERT INTO `test`(name,email) VALUES('".$name."','".$email."')";
if(mysqli_query($conn,$insert_query))
{
echo "inserted";
}
}
function demo(){
GLOBAL $conn;
if(isset($_GET['store']) && $_GET['store']=='showdata')
{
$w="SELECT * FROM `test`";
$r=mysqli_query($conn,$w);
while($row=mysqli_fetch_array($r))
{
?>
<table align="center">
<tr id="row<?php echo $row['id'];?>">
<td id="name_val<?php echo $row['id'];?>"><?php echo $row['name']; ?></td>
<td id="email_val<?php echo $row['id'];?>"><?php echo $row['email']; ?></td>
<td><input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');"></td>
<td> <input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');"></td>
<td><input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');" style="display:none"></td>
</tr>
</table>
<?php
}
}
}
demo();
if(isset($_POST['delete_row']))
{
$row_no=$_POST['row_id'];
$d="delete from test where id='$row_no'";
mysqli_query($conn,$d);
echo "success";
exit();
}
if(isset($_POST['edit_row']))
{
$row=$_POST['row_id'];
$name=$_POST['name_val'];
$email=$_POST['email_val'];
$u="update `test` set name='$name',email='$email' where id='$row'";
mysqli_query($conn,$u);
echo "success";
exit();
}
?>
{[['
']]}
']]}
No comments