Simple ajax driven php webistes

14
02Simple ajax driven php webistes

I have been getting many request from my junior followers to develop a simple ajax php websites. So this time i have showing you a simple website that build in php ajax and bootstrap. The code is positioned in the body part. With the help of jquery ajax communication the code from from front end is send back to php (back-end). Also note that the addresses of the navigation links -#page . This part is called as a hash, which included in the URL. This will helpful when creating an entry in the browsers history it will display the appropiate content witout page refresh.

simple-ajax-php-website-hackandphp

First we have to create the html page.

HTML

view plain copy to clipboard print ?

<ul class="nav navbar-nav" id="navigation">
<li id="home"> <a href="#home"> <span class="glyphicon glyphicon-home"></span> Home </a> </li>
<li id="gallery"> <a href="#gallery"> <span class="glyphicon glyphicon-camera"></span> Gallery </a> </li>
<li id="contact"> <a href="#contact"> <span class="glyphicon glyphicon-phone"></span> Contact Us </a> </li>
</ul>
<div id="pageContent">
<div class="col-md-8">
<div class="well well-sm">
<form>
<div class="row">
<div class="col-md-6">
<h1>What is Lorem-Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="col-md-6">
<h1>What is Lorem-Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<div class="container-fluid">
<img src="img/lorem_ipsum.jpg" class="img-responsive">
</div>
</div>
</div>

 
       Home  
       Gallery  
       Contact Us  
      


            
                
                
                    
                       What is Lorem-Ipsum?
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    
                    
                          What is Lorem-Ipsum?
                       Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Jquery Ajax

view plain copy to clipboard print ?

/** Show loading **/
function ajaxloading() {
var obj = $(document.createElement('div')).attr("class", "se-pre-con");
$("body").append(obj);
$(".se-pre-con").show();
}
/** hide loading **/
function closeajax() {
$(".se-pre-con").remove();
}
function loadPage(url) {
url = url.replace('#', '');
$('ul li').removeClass('active'); //Remove the class active in li
$('#' + url).addClass('active'); //Make the current li active
ajaxloading();
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page=' + url,
dataType: "html",
success: function(msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
closeajax();
}
}
});
}

/** Show loading **/
function ajaxloading() {
    var obj = $(document.createElement('div')).attr("class", "se-pre-con");

    $("body").append(obj);

    $(".se-pre-con").show();
}
/** hide loading **/
function closeajax() {

    $(".se-pre-con").remove();
}
function loadPage(url) {
    url = url.replace('#', '');
    $('ul li').removeClass('active'); //Remove the class active in li
    $('#' + url).addClass('active'); //Make the current li active
    ajaxloading();
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page=' + url,
        dataType: "html",
        success: function(msg) {

            if (parseInt(msg) != 0) {
                $('#pageContent').html(msg);
                closeajax();
            }
        }

    });

}

Ajax is the technique used to send the request to the php and receive the response. The response is retrieving in the HTML content. Here the page name is send as the request, at first is basically check whether the $_POST['page'] is exists. If it is exists the content is send back as response to the jquery.