This tutorial will help user to learn, how to implement create, retrieve, update, and delete operations without refreshing the web page using Ajax and simple php.

This is the html file named view.php

<script src="js/jquery.js"></script> <script src="js/curd.js"></script>

<div id="ajxrsp">
<?php foreach ($data as $value): ?>
    <div class="row<?php echo $value['id']; ?>">
        <input class="name" type="text" value="<?php echo $value['name']; ?>" name="name" />
        <input class="phone" type="text" value="<?php echo $value['phone']; ?>" name="phone" />
        <input class="address" type="text" value="<?php echo $value['address']; ?>" name="address" />
        <a class="update" href="#" rel="<?php echo $value['id']; ?>">UPDATE</a>
        <a class="delete" href="#" rel="<?php echo $value['id']; ?>">DELETE</a>
    </div>
    <?php endforeach; ?>
<form id="info">
    <label for="name">User Name:</label>
    <input id="name" type="text" name="name" /><br />
    <label for="phone">Contact No:</label>
    <input id="phone" type="text" name="phone" /><br />
    <label for="address">Address:</label>
    <input id="address" type="text" name="address" /><br />
    <input type="submit" value="Send"> <br/><br/><br/>
</form>
</div>

This is the js file named as curd.js

$(document).ready(function() {

    $('#info').submit(function() {
        $.post('./curd/ajaxPost.php',$('#info').serialize(), function() {
            $('#ajxrsp').load(location.href);
        });
        return false;
    });

    $('.update').click(function() {
        var item = $(this).parent();
        var id = $(this).attr('rel');
        var name = $('.row' + id + ' .name').val();
        var phone = $('.row' + id + ' .phone').val();
        var address = $('.row' + id + ' .address').val();

        $.post('./curd/ajaxUpdate.php', {
            'id' : id,
            'name' : name,
            'phone' : phone,
            'address' : address
        });
    });

    $('.delete').click(function() {
        var item = $(this).parent();
        var id = $(this).attr('rel');
        alert(id);
        $.post('./curd/ajaxDelete.php', {
            'id' : id
        }, function() {
            $(item).hide('slow', function() {
                $(item).remove();
            });
        });
    })
});

config file config.php

<?php
include 'mysqli.class.php';

$config = array();
$config['host'] = 'localhost';
$config['user'] = 'root';
$config['pass'] = '123456';
$config['dbase'] = 'crud';

$db = new DB($config);

Our first page that consists form for input, named as index.php

<?php

include 'curd/config.php';

$db->query('SELECT * FROM crud.users');
$data = $db->get();
include 'view.php';

File for making db connecting msqli.class.php

<?php
class DB
{

    private $fetchMode = MYSQLI_BOTH;

    public function  __construct($db) {
        $this->mysqli = new mysqli($db['host'], $db['user'], $db['pass'], $db['dbase']);

        if (mysqli_connect_errno()) 
        {
            printf("<b>Connection failed:</b> %s\n", mysqli_connect_error());
            exit;
        }
    }
    public function setFetchMode($type)
    {
        switch($type)
        {           
            case 1:
            $this->fetchMode = MYSQLI_NUM;
            break;          
            case 2:
            $this->fetchMode = MYSQLI_ASSOC;
            break;
            default:
            $this->fetchMode = MYSQLI_BOTH;
            break;

        }

    }

    public function query($SQL)
    {   
        $this->SQL = $this->mysqli->real_escape_string($SQL);
        $this->result = $this->mysqli->query($SQL);

        if ($this->result == true)
        {
            return true;
        }
        else
        {
            printf("<b>Problem with SQL:</b> %s\n", $this->SQL);
            exit;
        }
    }
    public function get($field = NULL)
    {
        if ($field == NULL)
        {
            /** Grab all the data */
            $data = array();

            while ($row = $this->result->fetch_array($this->fetchMode))
            {
                $data[] = $row;
            }
        }
        else
        {
            /** Select the specific row */
            $row = $this->result->fetch_array($this->fetchMode);
            $data = $row[$field];
        }

        /** Make sure to close the result Set */
        $this->result->close();
        return $data;
    }
    public function id()
    {
        return $this->mysqli->insert_id;
    }
    public function __destruct()
    {
        $this->mysqli->close();
    }
}

File for inserting data in the db ajaxPost.php

<?php
include 'config.php';

$name = $_POST['name'];
$phone = $_POST['phone'];
$address = $_POST['address'];

if ($name || $phone || $address) {
    $db->query("INSERT INTO users(name, phone, address) VALUES('$name', '$phone', '$address')");
}

File for updating data in the db ajaxUpdate.php

<?php
include 'config.php';

$id = $_POST['id'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$address = $_POST['address'];

$db->query("UPDATE users SET name = '" . $name . "', phone = '" . $phone ."', address = '" . $address . "' WHERE id = " . $id);

File for deleting data in the db ajaxDelete.php

<?php
include 'config.php';

$id = $_POST['id'];
$db->query("DELETE FROM users WHERE id = ". $id);`print("code sample");`

Database name: crud; Table name: users ; column name: id, name, phone, address