14
02
Simple 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

 

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


/** 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.

PHP


404! Page Not Found

That's all. Just check the live demo and download the source code and enjoy.

By posted on - 14th Feb 2016

Social Oauth Login

Personalized Map Navigation

Online Image Compression Tool

Image Compression

Advertisement

Recent Posts

Categories