Insert and view data without refresh using PHP, MySql and AJAX

Insert and view the data from database without refresh using PHP, MySql, AJax and JQuery. this concept is mostly searching by everyone, here i'm going to show you that, in an usual insert and view take page refresh. so the loading will make page loading delay, so here i'm going use AJAX for make that insert and view without refreshing the page. and i already show you that how to create database and how to insert data in that.

DOWNLOAD                         LIVE DEMO

for that we need to make three file to clear explanation. let see those files.

1. DB.PHP
2. INDEX.PHP
3. ACTION.PHP

The above three files details below here.

DATABASE DETAILS

database name : 2my4edge

table name : comment

column names : id, msg, ip_add

DB.PHP

<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db=mysql_select_db('2my4edge', $conn) or die (mysql_error);
?>

INDEX.PHP

<div class="container">
<div class="main">
<form  method="post" name="form" action="">
<textarea style="width:500px; font-size:14px; height:60px; font-weight:bold; resize:none;" name="content" id="content" ></textarea><br />
<input type="submit" value="Post" name="submit" class="submit_button"/>
</form>
</div>
<div class="space"></div>
<div id="flash"></div>
<div id="show"></div>
</div>

in the same index.php file, we have to add  the AJAX details to make operation. let see the AJAX

AJAX

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".submit_button").click(function() {
var textcontent = $("#content").val();
var dataString = 'content='+ textcontent;
if(textcontent=='')
{
alert("Enter some text..");
$("#content").focus();
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: true,
success: function(html){
$("#show").after(html);
document.getElementById('content').value='';
$("#flash").hide();
$("#content").focus();
}  
});
}
return false;
});
});
</script>

the above is the script for make the function without refreshing the page.

ACTION.PHP

<?php
include('db.php');
$check = mysql_query("SELECT * FROM comment order by id desc");
if(isset($_POST['content']))
{
$content=mysql_real_escape_string($_POST['content']);
$ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
mysql_query("insert into comment(msg,ip_add) values ('$content','$ip')");
$fetch= mysql_query("SELECT msg,id FROM comment order by id desc");
$row=mysql_fetch_array($fetch);
}
?>

<div class="showbox"> <?php echo $row['msg']; ?> </div>

the above showbox is to show the msg, what was store in the database.

RELATED POSTS:

Create Database with MySql and INSERT coding in php

Comment System using PHP and MySql

Choose state and city based on country using Jquery

Username live availability Check using php and Ajax

Simple Login logout system using php

File download coding using PHP and Mysql

Simple Pagination with loading effect using Qjuery, PHP and MySql

Export the MySQL database table as CSV format using PHP

Autocomplete search using php, mysql and ajax