Simple Inserting And Retrieving Data Without Page Refresh Using Ajax

Submitted by razormist on Wednesday, March 1, 2017 - 19:32.

In this tutorial we will create a Simple Inserting And Retrieving Data Without Page Refresh Using Ajax. Ajax is a new technique for creating better, faster, and more interactive web applications. It is widely used by other well known websites like facebook. Let see how Ajax works with PHP in an interactive kind of application. Let's start coding. Creating A Database To create a database open any kind of database base server that you have(wamp, xamp, etc..). Then create database and name it 'db_post'. After that click SQL then copy/paste the code below.

CREATE TABLE `post` (
  `post_id` int(11) NOT NULL AUTO_INCREMENT,
  `post` text NOT NULL,
  `name` varchar(30) NOT NULL
  PRIMARY KEY (`post_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Creating The Connection To create the connection copy/paste the code below and name it 'connection.php'

<?php
        $conn = new mysqli("localhost", "root", "", "db_post") or die(mysqli_error());
        if(!$conn){
                die("Connection Failed!");
        }
?>

Creating The Mark Up To create the form, copy/paste the code below then name it 'index.php'

<!DOCTYPE html>
        
<html lang = "en">
        <head>
                <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
        </head>
<body>
        <nav class = "navbar navbar-default">
                <div class = "container-fluic">
                        <a href = "https://sourcecodester.com" class = "navbar-brand">Sourcecodester</a>
                </div>
        </nav>
        <div class = "row">
                <div class = "col-md-3"></div>
                <div class = "col-md-6 well">
                        <h3 class = "text-primary">Simple Inserting And Retrieving Data Without Page Refresh Using Ajax</h3>
                        <hr style = "border-top:1px dotted #000;"/>
                        <button class = "btn  btn-primary" id = "btn_post"><span class = "glyphicon glyphicon-plus"></span> Add Post</button>
                        <button style = "display:none;" class = "btn  btn-danger" id = "btn_close"><span class = "glyphicon glyphicon-remove"></span> Close</button>
                        <br /><br />
                        <div  style = "display:none;" id = "post_form" class = "col-md-12">
                                <form>  
                                        <input type = "text" class = "form-control" placeholder = "Name" style = "width:50%;" id = "name"/>
                                        <br />
                                        <textarea style = "resize:none;" id = "post" class = "form-control" placeholder = "Enter your post here..."></textarea>
                                        <br />
                                        <button type = "button" id = "add_post">Post</button>
                                </form> 
                                <br /><br />
                        </div>
                        <div id = "result">     
        
                        </div>  
                </div>
        </div>
</body>
<script src = "js/jquery-3.1.1.js"></script>    
<script type = "text/javascript">
        $(document).ready(function(){
        displayResult();
        /*      ADDING POST     */      
                $('#btn_post').on('click', function(){
                        $('#post_form').slideDown();
                        $('#btn_close').show();
                        $(this).hide();
                        $('#post').val('');
                });
                
                $('#btn_close').on('click', function(){
                        $('#post_form').slideUp();
                        $('#btn_post').show();
                        $(this).hide();
                });
                
                $('#add_post').on('click', function(){
                        if($('#post').val() == "" || $('#name').val() == ""){
                                alert('Please enter something first');
                        }else{
                                $('#post_form').slideUp();
                                $('#btn_post').show();
                                $('#btn_close').hide();
                                $post = $('#post').val();
                                $name = $('#name').val();
                                $.ajax({
                                        type: "POST",
                                        url: "add_post.php",
                                        data: {
                                                post: $post,
                                                name: $name
                                        },
                                        success: function(){
                                                $('#name').val('');
                                                displayResult();
                                        }
                                });
                        }       
                });
        /*****  *****/
        });
        
        function displayResult(){
                $.ajax({
                        url: 'add_post.php',
                        type: 'POST',
                        async: false,
                        data:{
                                res: 1
                        },
                        success: function(response){
                                $('#result').html(response);
                        }
                });
        }
        
</script>
</html>

The code above will send a request to PHP server when the button is clicked. The $('add_post') will store and send the data to the php script, and save the data to the database server at the same time . The displayResult() function will call back the php request and then display the data from the database server. PHP Query To make the query works, copy/paste the code below and name it 'add_post.php'

<?php
        require_once 'connection.php';
        if(ISSET($_POST['name'])){              
                $post = addslashes($_POST['post']);
                $name = $_POST['name'];
                $conn->query("INSERT INTO `post` (`post`, `name`) VALUES('$post', '$name')") or die(mysqli_error());
        }
?>              
<?php
        if(ISSET($_POST['res'])){
                $q_post = $conn->query("SELECT * FROM `post` ORDER BY `post_id` ASC") or die(mysqli_error());
                while($f_post  = $q_post->fetch_array()){
?>      
                <div class = "col-md-12 content" style = "word-wrap:break-word; background-color:#fff; padding:20px;">
<?php echo '<h4 class = "text-danger">'.$f_post['name'].'</h4>';?>
<hr style = "border-top:1px solid #000;"/>
<?php echo $f_post['post']?>
                </div>
                <br style = "clear:both;"/>
                <br />
<?php
                }
        }       
?>

There you have it we create a simple Ajax application with PHP. I hope that this tutorial help to your projects. For more updates and tutorials just kindly visit this site, don't forget to LIKE and SHARE. Enjoy Coding!!

Add new comment

174 views