Php

How to View Data in Php using Ajax

Hey Everyone today i am gone tell you How to View Data in Php using Ajax

We are Covering hole Crud operation in php using JQuery Ajax

  • How to Insert Data in php using Ajax
  • How to View Data in Php using Ajax
  • How to Delete Data in php using Ajax
  • How to Update Data in php using Ajax

What i Use in My JQuery-Ajax Crud Project with php

  • XAMPP Server
  • MySQL for Database
  • JQuery-Ajax CDN Link
  • Php Language
  • VS Code editor

Folder Structure…

 

 
Step 1) Create Database
Go to This link in Localhost and create database
Database 
  • DB Name: ajax_crud
  • Table name: student
    CREATE TABLE `student` (
    `id` int(11NOT NULL,
    `name` varchar(55NOT NULL,
    `email` varchar(55NOT NULL,
    `message` varchar(55NOT NULL
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 

 

 

Step 2) Create File config.php 
  • it was my Connection file which can connect php to MySQL database to perform Query’s.

 

 

    <?php
    /* Database credentials. Assuming you are running MySQL
    server with default setting (user ‘root’ with no password) */
    define(‘DB_SERVER’‘localhost’);
    define(‘DB_USERNAME’‘root’);
    define(‘DB_PASSWORD’);
    define(‘DB_NAME’‘ajax_crud’);
    /* Attempt to connect to MySQL database */
    $link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
    // Check connection
    if($link === false){
        die(“ERROR: Could not connect. “ . mysqli_connect_error());
    }
    ?>

 

 

Step 3) Create File Read.php
  • In this HTML file i can show Show data in tables.
<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
     <!– Bootstrap 5–>
  <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css”
     rel=“stylesheet”>
      <!– Google Fonts –>
    <link rel=“preconnect” href=“https://fonts.googleapis.com” />
    <link rel=“preconnect” href=“https://fonts.gstatic.com” />
    <link href=“https://fonts.googleapis.com/css2?family=Raleway&display=swap”
    rel=“stylesheet”/>
     <!– Jquery CDN –>
    <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”>
    </script>

 

    <title>Read</title>
    <style>
      body {
        background-colorwhitesmoke;
        font-family“Raleway”sans-serif;
      }
    </style>
</head>
<body>

 

<div class=“container mt-5” style=width:40%>
  <h1 class=“text-center”>View data In Php using Ajax</h1>
    <table class=“table table-bordered text-center mt-4” >
    <thead >
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Message</th>
        <th>Update</th>
        <th>Delete</th>
      </tr>
    </thead>

 

    <tbody id=“table”>
    </tbody>
  </table>
</div>

 

<script>
$(document).ready(function() {

 

    $.ajax({
        url: “AJax_view.php”,
        type: “POST”,
        cache: false,
        success: function(data){
            $(‘#table’).html(data);
        }
    });
});
</script>
</body>
</html>

 

 

 

 
 
Step 3) Create File Ajax_view.php
  • it is my Ajax_view.php file in this file we are creating dynamic tables using php.
<?php
    require ‘config.php’;
    $sql = SELECT * FROM student;
    $result = mysqli_query($link$sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
?>
        <tr>
            <td><?=$row[‘name’];?></td>
            <td><?=$row[’email’];?></td>
            <td><?=$row[‘message’];?></td>
            <td> <button class=“btn btn-warning btn-sm” >Update</button> </td>
            <td> <button class=“btn btn-danger btn-sm” >Delete</button> </td>

 

        </tr>
<?php
    }
    }
    else {
        echo “0 results”;
    }
?>

 

 

Go to Browser open url: 
 
=> Snapshots
 

 

————————————————————————————————————————————–
 
 

 

   

 

 

=============================================================================================
 
 
I hope this Post help you….
if you get any errror comment or message me.. i will help you..