Php

How to Insert Data in php using Ajax

Hey Everyone today in this artcle i  am gone tell you How to Insert data using JQuery Ajax in php

We are Covering hole Crud operation in php using JQuery Ajax

  • How to Insert Data in php using Ajax
  • How to Read 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 Create.php
  • it was my HTML file which have a basic form with three fields like name , email , message and Ajax get fields data by using id & send data to another file ( Ajax_insert.php ) in background.
    <!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” crossorigin />
        <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>Create</title>

 

    </head>
    <body>
    <center>
        <form id=“myform”>
        Name
        <input type=“text” id=“name” placeholder=“Enter Name”> <br/><br/>
        Email
        <input type=“email”  id=“email” placeholder=“Enter Email”><br/><br/>
        Message
        <input type=“text”  id=“message” placeholder=“Enter Message”> <br/><br/>
        <button type=“submit” id=“submit” name=“submit”
                class=“btn btn-primary”>Submit</button>
    </form>
    </center>

 

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

 

        $(‘#submit’).on(‘click’function(e) {
            e.preventDefault();

 

            var name = $(‘#name’).val();
            var email = $(‘#email’).val();
            var message = $(‘#message’).val();
            if(name!=“” && email!=“” && message!=“”){
                $.ajax({
                    url: “Ajax_insert.php”,
                    type: “POST”,
                    data: {
                        name: name,
                        email: email,
                        message: message
                    },
                    cache: false,
                    success: function(datar){
                        $(‘#myform’).trigger(“reset”);
                        alert(datar);
                    }
                });
            }
            else{
                alert(‘Please fill all the field !’);
            }
        });

 

    });
    </script>
    </body>
    </html>

 

 
 

 

Step 3) Create File Ajax_insert.php
  • it was my Basic Ajax_insert.php file which can get data in background & insert to database. after insert it will also send a return message to Create.php file 

 

 

    <?php
        require ‘config.php’;
            $name=$_POST[‘name’];
            $email=$_POST[’email’];
            $message=$_POST[‘message’];
            $sql = INSERT INTO `student`( `name`, `email`, `message`) 
            VALUES (‘$name‘,’$email‘,’$message‘);
            if (mysqli_query($link$sql)) {
                echo “Data Inserted”;
            }
            else {
                echo “Data Not Inserted”;
            }

 

    ?>

 

 

 

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..