PHP SQL / Ajax检索问题

Question

I have a web application where I get the data from a mysql database and put it in the website with the help of handlebars templating.

First of all, the PHP i use looks something like this:

<?php

function isXHR() {
    return isset( $_SERVER['HTTP_X_REQUESTED_WITH'] );
}


function connect(){
    global $pdo;
    $pdo = new PDO("mysql:host=localhost;dbname=personal", "user", "password");
}

function get_blog_posts( ) {
    global $pdo;

    $stmt = $pdo->prepare('
        SELECT url, title, location, date, author, content, thmb 
        FROM photolog
        LIMIT 50');
    $stmt->execute();

    return $stmt->fetchAll( PDO::FETCH_OBJ );
}

Then i use a javascript function that I call inside the document.ready(...) that looks like:

function loadBlogPosts(){
    var photos = {
    init: function( config ) {
        this.config = config;

        this.setupTemplates();
        this.fetchphotos();
        this.helpers();

        $.ajaxSetup({
            url: 'index.php',
            type: 'POST'
        });

    },

    setupTemplates: function() {
        this.config.photoListTemplate = Handlebars.compile( this.config.photoListTemplate);
    },

    helpers: function(){
        Handlebars.registerHelper("foreach",function(arr,options) {
        if(options.inverse && !arr.length)
            return options.inverse(this);

        return arr.map(function(item,index) {
            item.$index = index;
            item.$first = index === 0;
            item.$last  = index === arr.length-1;
            item.$rest  = index >= 1;
            return options.fn(item);
        }).join('');
    });
    },

    fetchphotos: function() {
        var self = photos;

        $.ajax({
            dataType: 'json',
            success: function(results) {
                self.config.photosList.empty();

                for(i=0;i<results.length;i++){
                    results[i].author = results[i].author.toLowerCase();
                    results[i].title = results[i].title.toUpperCase();
                    results[i].location = results[i].location.toUpperCase();
                }
                if ( results[0] ) {
                    self.config.photosList.append( self.config.photoListTemplate( results.reverse() ) );
                } else {
                    self.config.photosList.append('<li>Nothing returned.</li>');
                }
            }
        });

    }
};

photos.init({
    photoListTemplate: $('#photo_blog_template').html(),
    photosList: $('div#blog_list')
});
}

And then put the data into the template:

<div id="blog_list">
                <script id="photo_blog_template" type="text/x-handlebars-template">
                    {{#foreach this}}
                    {{#if $first}}
                        <div class="4u">
                            <div class="photo">
                                    <a id="single_image" href="{{url}}"><img src="{{thmb}}" alt=""/></a>
                            </div>
                        </div>

                        <div class="8u post">
                            <header>
                                <h2>{{title}}</h2>
                                <h3>{{location}}</h3>
                                <div class="antet">
                                    <div class="author">{{author}}</div>
                                    <div class="date">{{date}}</div>
                                </div>
                            </header>
                            <p>{{content}}</p>
                        </div>

                    {{/if}}
                    {{#if $rest}}
                        <div class="3u post-small">
                            <div class="photo">
                                    <a id="single_image" href="{{url}}"><img src="{{thmb}}" alt=""/></a>
                            </div>
                            <header>
                                <h2>{{title}}</h2>
                                <h3>{{location}}</h3>
                                <div class="antet">
                                <div class="author-small">{{author}}</div>
                                <div class="date-small">{{date}}</div>
                            </div>
                            </header>
                            <p>{{content}}</p>
                        </div>          
                    {{/if}}
                    {{/foreach}}
                </script>
        </div>

The problem appears on the new android browsers, and after I close the application/page and open it with ctrl+shift+T. It doesn't show the page, it just shows the json file. The page is at stefanperju.com