Insert data into MySQL using php, jquery, Ajax

This is a simple example for inserting data into a mysql database using php as the server-sided programming language.. This uses ajax via jquery for inserting the records… For those of you who do not know what jquery is – jquery is a javascript library with a lot of functions which lets u write less code, which is highly efficient .. You can download this latest version at the jquery.com website… So let’s get started…

  • Construct Database:
We Create a Database called zwaroop. Add a new table myTable with fields: ID as INT, Name as VARCHAR(50),    Email as VARCHAR(50).
For those who are using LAMP, WAMP, XAMPP etc.. this is straight forward… Go ahead to your web browser and navigate to http://localhost/phpmyadmin, which is a GUI that allows you to construct your database as quickly as possible.

So far we have.,

Database Name: zwaroop

Table Name: myTable

Field Names: ID, Name, Email

  • Create home.php file
This is our basic html page that the user will be viewing it…
<html>
<head>
<title>zwaroop's home</title></pre>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<label>ID: </label> <input id="ID" type="text" />
<label>Name: </label> <input id="Name" type="text" />
<label>E-Mail: </label> <input id="Email" type="text" />
<a id="insert" title="Insert Data" href="#">Push into mysql</a>
 <!-- For displaying a message -->

<div id="message"></div>
</body>
</html>
  • Create insert.php file:
Create a page called insert.php, this page include all the server-sided code for inserting data into our mysql database. Assume our front-end html page consists of 3 input boxes that takes the ID, Name and Email… So here we go,
Advertisements