April 7, 2019
HomeGeneralInsert Data into MySQL database with PHP and AJAX without refreshing the page (Source Code)

Insert Data into MySQL database with PHP and AJAX without refreshing the page (Source Code)

By  General  0 Comments

 

 

 

 

 

 

 

What you need?

  • WAMP
  • Dreamweaver / Notepad
  • Some knowledge of creating mysql database

First of all you need to create a database. Install WAMP if you have not installed yet. Open http://localhost/phpmyadmin/ and log in. Create a database with the name insertdb. Copy the below SQL to create the required tables.

Database:

— phpMyAdmin SQL Dump
— version 4.8.4
— https://www.phpmyadmin.net/
—
— Host: 127.0.0.1:3306
— Generation Time: Apr 07, 2019 at 08:29 AM
— Server version: 5.7.24
— PHP Version: 5.6.40

SET SQL_MODE = “NO_AUTO_VALUE_ON_ZERO”;
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = “+00:00”;

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

—
— Database: `insertdb`
—

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

—
— Table structure for table `users`
—

DROP TABLE IF EXISTS `users`;
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` text NOT NULL,
`password` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

—
— Dumping data for table `users`
—

INSERT INTO `users` (`id`, `username`, `password`) VALUES
(1, ‘abc’, ‘def’),
(2, ‘ade’, ‘dfe’),
(3, ‘efd’, ‘efe’),
(4, ‘dfe’, ‘dfe’);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Open notepad or dreamweaver to create a file and name it index.php. Write the below code.

index.php

<!DOCTYPE html>
<html>
<head>
<title>Insert Data into MySQL database with PHP and AJAX without refreshing the page (Source Code)</title>
<script src=’https://code.jquery.com/jquery-2.1.3.min.js’></script>
</head>
<body>
<form action=’insertconn.php’ method=’post’ id=’insertform’ >
<p>
<input type=’text’ name=’username1′ placeholder=’user name’ id=’username’ />
</p>
<p>
<input type=’text’ name=’password1′ placeholder=’password’ id=’password’ />
</p>
<button id=’insert’>Insert</button>
<p id=’result’></p>
</form>

<script>
$(‘#insertform’).submit(function(){
return false;
});
$(‘#insert’).click(function(){
$.post(
$(‘#insertform’).attr(‘action’),
$(‘#insertform :input’).serializeArray(),
function(result){
$(‘#result’).html(result);
$(“#username”).val(“”);
$(“#password”).val(“”);
}
);
});
</script>
</body>
</html>

insertconn.php

<?php

$con = mysqli_connect(“localhost”,”root”,”root”,”insertdb”);
$username1 = $_POST[‘username1’];
$password1 = $_POST[‘password1’];
$query = “insert into users (username, password) values (‘$username1′,’$password1’)”;

if(mysqli_query($con, $query)){
echo ‘Record has been added!’;
}

?>

Post Views: 3,806
Tags:, , , , , ,

Related Posts

About Author

FastBikri Team