php ajax insert data into database

PHP ajax insert data into database

In this lesson we are going to learn how to insert data into database using php and ajax.

Database Name: test

Table Name: user

Create 6 files named:

1. index.html

2. insert.php

3. jquery.js ( Cdn https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)

4. script.js

5. style.csS

Download Jquery or Use Cdn https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Now Copy below codes and save it..
1.index.php

<html>
<head>
 <title>AJAX Insert Data Into MySQL Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
   <script type="text/javascript" src="script.js"></script>
   <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>
 
 <div id="content">
  <h1>PHP Ajax Insert Data Without Page Refresh</h1>
 <form method="POST" action="">
 <table>
   <tr>
      <td><span>UserName:</span></td>
   <td><input type="text" id="username" name="username"></td>
   </tr>
   <tr>
     <td><span>Email:</span></td>
  <td><input type="text" id="email" name="email"></td>
   </tr>
   <tr>
      <td></td>
   <td><input type="button" name="submit" id="submit" value="Insert"/></td>
   </tr> 
 </table>
 </form>
 <div id="success"></div>
 </div>
 </html>

2. insert.php:

<?php
  if(isset($_POST['username'])&&$_POST['email']){
   //Creating MySQL Connection
   $conn=new mysqli('localhost','root','','codenair.com');
   //getting Data from index page
    $username=$_POST['username'];
    $email=$_POST['email'];
    //Inserting Data
    $result=mysqli_query($conn,"INSERT INTO user(username,email)VALUES('$username','$email')");
    if($result){
     echo "<font style=color:green size=5>Your Data Successfully Inserted</font>";
    }else{
     echo "<font style=color:red size=5>Failed To Insert Your Data</font>";
    }
  }
?>

4. script.js:

$(document).ready(function(){
 $("#submit").click(function(){
  var username=$('#username').val();
  var email=$('#email').val();
  if(username==""){
   alert("username not be Empty");
  }
  if(email==""){
   alert("Email Not be empty");
  }
  if(!username==""&&!email==""){
   $.ajax({
    url:"insert.php",
    type:"POST",
    data:{username:username,email:email},
    success: function(data){
     $("#success").html(data);
  $('#username').val('');
  $('#email').val('');
    }
   });
   return false;
  }
   
 });
});

5. style.css

#content{
 width:800px;
 margin:auto;
 background:white;
 box-shadow:2px 3px 2px 5px #f2f2f2;
}
span{
 font-size:20px;
 color:red;
 font-weight:bold;
}
input[type=text]{
 padding:5px;
 width:300px;
 border:2px solid blue;
 border-radius:5px;
}
input[type=button]{
 padding:6px 8px;
 background:#000;
 color:white;
 border-radius:5px;
 cursor:pointer;
  
}

That's it how to insert data into database using php ajax..Thank You..keep Visiting for More Codes...

Latest

Sunday, February 4, 2018

php ajax insert data into database