PHP AJAX Insert Data into mysql database without refreshing the page

PHP AJAX Insert Data into mysql

PHP AJAX Insert Data into mysql database without refreshing the page.it's easy to insert data in mysql without page refreshing.follow the blew examples to lean how to insert data into mysql using php ajax.
=>Database Structure:
Datbase Name: => test
Table Name: => user
=>SQL for User Table:

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(150) NOT NULL,
  `email` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

create 4 files and jquery.js (JQuery CDN Link)

1.index.html

2.insert.php

3.script.js

4.style.css

and jquery.js

use Your below codes to insert data into mysql using php ajax

1. index.html codes:

<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 codes:

<?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>";
    }
  }
?>

3. script.js codes:

$(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;
  }
   
 });
});

4. style.css codes:

#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 is Guys PHP AJAX Insert Data into mysql database without refreshing the page. please keep visiting for more codes..Thank you..

Latest

Monday, February 5, 2018

PHP AJAX Insert Data into mysql database without refreshing the page