AJAX ADD & RETRIEVE MYSQL RECORDS USING JQUERY & PHP

shara 10/10/2015 08:16:00 PM Leave a Comment
I love jQuery framework, feels like we can do some awesome things easily. If you are familiar with the basic of jQuery framework too, the next thing you have to do is learn to use jQuery Ajax to add and retrieve records from MySql database. Let’s take a look at how we implement real time add and retrieve records using Ajax.

Database
sample database comment table columns id, name and message

+---------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+---------+--------------+------+-----+---------+----------------+
| id | int(5) | NO | PRI | NULL | auto_increment |
| name | varchar(20) | NO | | NULL | |
| message | varchar(120) | NO | | NULL | |
+---------+--------------+------+-----+---------+----------------+
view raw gistfile1.txt hosted with ❤ by GitHub


comment.php

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
var name=$("#name").val();
var message=$("#message").val();
$.ajax({
type:"post",
url:"process.php",
data:"name="+name+"&message="+message,
success:function(data){
$("#info").html(data);
}
});
});
});
</script>
</head>
<body>
<form>
name : <input type="text" name="name" id="name"/>
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="button" value="Send Comment" id="button">
<div id="info" />
</form>
</body>
</html>
view raw comment.php hosted with ❤ by GitHub

process.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("php_databaseajax");
$name=$_POST["name"];
$message=$_POST["message"];
$query=mysql_query("INSERT INTO comment(name,message) values('$name','$message') ");
if($query){
echo "Your comment has been sent";
}
else{
echo "Error in sending your comment";
}
?>
view raw process.php hosted with ❤ by GitHub
Try to input some comments using that form, here’s what i got



The record i just submitted is successfully added to the database. Although we can’t see right now but it can be checked directly in your MySql.
+----+----------------+---------------------------+
| id | name | message |
+----+----------------+---------------------------+
| 1 | Agung Setiawan | Cool comment |
| 2 | Nusantara | Indonesia is hot but nice |
+----+----------------+---------------------------+
view raw gistfile1.txt hosted with ❤ by GitHub
What is the value of the comment feature of web app if visitors can’t see their own comment. Now, this is our time to be a hero… :D
Edit both files that we have created to add the ability to retrieve records from database.


comment.php
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function showComment(){
$.ajax({
type:"post",
url:"process.php",
data:"action=showcomment",
success:function(data){
$("#comment").html(data);
}
});
}
showComment();
$("#button").click(function(){
var name=$("#name").val();
var message=$("#message").val();
$.ajax({
type:"post",
url:"process.php",
data:"name="+name+"&message="+message+"&action=addcomment",
success:function(data){
showComment();
}
});
});
});
</script>
</head>
<body>
<form>
name : <input type="text" name="name" id="name"/>
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="button" value="Send Comment" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>
</body>
</html>
view raw comment.php hosted with ❤ by GitHub
process.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("php_databaseajax");
$action=$_POST["action"];
if($action=="showcomment"){
$show=mysql_query("Select * from comment order by id desc");
while($row=mysql_fetch_array($show)){
echo "<li><b>$row[name]</b> : $row[message]</li>";
}
}
else if($action=="addcomment"){
$name=$_POST["name"];
$message=$_POST["message"];
$query=mysql_query("INSERT INTO comment(name,message) values('$name','$message') ");
if($query){
echo "Your comment has been sent";
}
else{
echo "Error in sending your comment";
}
}
?>
view raw process.php hosted with ❤ by GitHub

Now it is more cool with visitor’s comment directly show up after Send Button is clicked



0 comments:

Post a Comment