Ajax Insert Records in Database Tutorial in PHP

 <?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

// Create Connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check Connection
if ($conn->connect_error) {
    die("Connection Failed : " . $conn->connect_error);
}
Above File is mysqli_conn.php File





Below File is show-data.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Show Data</title>
</head>

<body>
    <table id="main" border="0" cellspacing="0">
        <tr>
            <td id="header">
                <h1>PHP with Ajax</h1>
            </td>
        </tr>
        <tr>
            <td id="table-load">
                <input type="button" id="load-button" value="Load Data">
            </td>
        </tr>
        <tr>
            <td id="table-data">
            </td>
        </tr>
    </table>

    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>

    <script type="text/javascript">
        // When we use Ajax, at that time we don't need to use Form and if we use Form then we don't need to specity "method=POST OR GET"
        $(document).ready(function() {
            $("#load-button").on("click", function() {
                $.ajax({
                    url: "ajax-load.php",
                    type: "POST",
                    success: function(data) {
                        $("#table-data").html(data);
                    }
                });
            });
        });
    </script>
</body>

</html>




Below File is ajax-load.php File
<?php
include("mysqli_conn.php");

$sql = "SELECT * FROM students";
$result = $conn->query($sql);
$output = "";

if ($result->num_rows > 0) {
    $output = "<table border='1' width='100%' cellspacing='0' cellpadding='10px'>
                <tr>
                    <th>Id</th>
                    <th>Student Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>";

    while ($row = $result->fetch_assoc()) {
        $output .= "<tr><td>{$row["id"]}</td><td>{$row["student_name"]}</td><td>{$row["age"]}</td><td>{$row["city"]}</td></tr>";
    }
    $output .= "</table>";

    echo $output;
} else {
    echo "<h2>No Record Found.</h2>";
}
$conn->close();





Below File is insert-data.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Insert Data</title>
    <style>
        #table-data th {
            background: #74b9ff;
        }

        #table-data tr:nth-child(odd) {
            background: #ecf0f1;
        }

        #success-message {
            background: #DEF1D8;
            color: #008000;
            padding: 10px;
            margin: 10px;
            display: none;
            position: absolute;
            right: 15px;
            top: 15px;
        }

        #error-message {
            background: #EFDCDD;
            color: #ff0000;
            padding: 10px;
            margin: 10px;
            display: none;
            position: absolute;
            right: 15px;
            top: 15px;
        }
    </style>
</head>

<body>
    <table id="main" border="0" cellspacing="0">
        <tr>
            <td id="header">
                <h1>Add Records with PHP & Ajax</h1>
            </td>
        </tr>
        <tr>
            <td id="table-form">
                <form id="addForm">
                    Student Name : <input type="text" id="sname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Age : <input type="text" id="age">
                    City : <input type="text" id="city">
                    <input type="submit" id="save-button" value="Save">
                </form>
            </td>
        </tr>
        <tr>
            <td id="table-data">
            </td>
        </tr>
    </table>
    <div id="error-message"></div>
    <div id="success-message"></div>

    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function loadTable() {
                $.ajax({
                    url: "ajax-load.php",
                    type: "POST",
                    success: function(data) {
                        $("#table-data").html(data);
                    }
                });
            }
            loadTable();

            $("#save-button").on("click", function(e) {
                e.preventDefault();
                var sname = $("#sname").val();
                var age = $("#age").val();
                var city = $("#city").val();
                if (sname == "" || age == "" || city == "") {
                    $("#error-message").html("All fields are required.").slideDown();
                    $("#success-message").slideUp();
                } else {
                    $.ajax({
                        url: "ajax-insert.php",
                        type: "POST",
                        data: {
                            student_name: sname,
                            age: age,
                            city: city
                        },
                        success: function(data) {
                            if (data == 1) {
                                loadTable();
                                $("#addForm").trigger("reset");
                                $("#success-message").html("Data Inserted Successfully.").slideDown();
                                $("#error-message").slideUp();
                            } else {
                                $("#error-message").html("Can't Save Record").slideDown();
                                $("#success-message").slideUp();
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>




Below File is ajax-insert.php File
<?php
$student_name = $_POST["student_name"];
$age = $_POST["age"];
$city = $_POST["city"];

include("mysqli_conn.php");

$sql = "INSERT INTO students(student_name, age, city) VALUES('$student_name','$age','$city')";

if ($conn->query($sql) == TRUE) {
    echo 1;
} else {
    echo 0;
}










Comments

Post a Comment

Popular posts from this blog

GROUP BY Clause and HAVING Clause in PHP

GROUP BY :  The GROUP BY clause is used in conjunction with the SELECT Statement and Aggregate functions to group rows together by common column values. SELECT with GROUP BY Syntax : SELECT columns FROM table_name WHERE condition GROUP BY column_name(s); (Here above "condition" is Optional in above query). In "personal" table, there are 6 columns named id, name, percentage, age, gender, city. In "personal" table, column name "id" is PRIMARY KEY and column name "city" is FOREIGN KEY. In "courses" table, there are 2 columns named course_id and course_name. In "courses" table, column name "course_id" is PRIMARY KEY. In "city" table, there are 2 columns named cid and cityname. In "city" table, column name "cid" is PRIMARY KEY. SELECT with GROUP BY with Two Tables Syntax : SELECT columns FROM table1 INNER JOIN table2 ON table1.column_name = table2.column_name WHERE condition GROUP B...
Read more

Method Overriding in Traits in PHP

Image
  <?php class Base {     public function abc ()     {         echo "ABC method from Base class." ;     } } //The trait method(Here, abc() Method) will get priority compared to Parent class Method(Here, abc() Method) trait Test {     public function abc ()     {         echo "ABC method from test trait." ;     } } class Child extends Base {     use Test ;     public function abc ()     {         echo "ABC method from Child class." ;     } } $obj = new Child (); $obj -> abc ();
Read more

Mysqli database Connection and Display Table Data from Database

  <?php $servername = "localhost" ; $username = "root" ; $password = "" ; $dbname = "heer" ; $conn = new mysqli ( $servername , $username , $password , $dbname ); if ( $conn -> connect_error ) {     die ( "Connection Failed : " . $conn -> connect_error ); } $sql = " SELECT * FROM student " ; $result = $conn -> query ( $sql ); if ( $result -> num_rows > 0 ) {     while ( $row = $result -> fetch_assoc ())     {         echo "<pre>" ;         echo "Id: { $row ["id"]} - Name: { $row ["name"]} - Age: { $row ["age"]} - Phone No: { $row ["phone"]} - City: { $row ["city"]}" ;         echo "</pre>" ;     } } else {     echo "No result fount" ; } $conn -> close (); //  OUTPUT: //Id: 0 - Name: Raj - Age: 25 - Phone No: 9854233621 - City: Ahmedabad // Id: 1 - Name: Amit - Age: 22 - Phone No: 8533...
Read more