Question

我正在试图弄清楚如何使用我现有的PHP数据库脚本（例如连接到数据库以提供ajax内容），这样我就可以拥有HTML5历史api的干净网址，同时仍然支持HTML4浏览器（我稍后会实施）。

使用我以前的javascript页面加载器，我使用window.location.hash并仅与HTML4 jquery.history.js和jQuery ajax命令相关联。

我的问题是现在正在研究如何为HTML4和HTML5浏览器使用相同的PHP代码和数据库。

我尝试将旧的HTML4 jQuery命令实现到我的新脚本中，但它不起作用。

我的旧JS代码

$(document).ready(function () {

    $('#splash').fadeOut('slow');

    $.history.init(pageload);   

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {

        var hash = '/#404';
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');

        $('#loading').fadeIn('fast');
        $('#content').fadeOut('slow');

        getPage();

        return false;
    }); 
});

function pageload(hash) {
    if (hash) getPage();    
}

function getPage() {
    var hash = document.location.hash;
    hash = hash.replace(/^.*#/, '');

    var data = 'page=' + encodeURIComponent(hash);

    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  
            var html = eval('(' + html + ')');
            $('#content').fadeIn('fast');           
            $('#content').html(html.code);
            $('title').html(html.entitle);
            $('#loading').fadeOut('slow');
        }
    });




}

PHP代码

try {

$database = new PDO('mysql:dbname=' . $config['dbname'] . ';host=' . $config['host'], $config['username'], $config['password']);
$database -> exec("set names utf8");


if(isset($_GET['page'])) {
    $data = $database->prepare('SELECT * FROM data WHERE link = :page');

    $data->bindValue(':page', $_GET['page'], PDO::PARAM_STR);
    $data->execute();

    echo json_encode($data->fetch());
}

}

MY NEW（和unworking）JS CODE

 var contentEl = document.getElementById('content'),
    photoEl = document.getElementById('photo'),
    linkEls = document.getElementsByTagName('a');


function updateContent(data) {
  if (data == null)
    return;

  contentEl.textContent = data.content;
  photoEl.src = data.photo;
}

function clickHandler(event) {
   loaddata = 'page=' + event.target.getAttribute('href').split('/').pop();

    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: loaddata,     
        cache: false,
        success: function (html) {  
            var data = eval('(' + html + ')');
            $('#content').html(data.code);
            $('title').html(data.title);
            history.pushState(data, event.target.textContent, event.target.href);
            return event.preventDefault();

        }
    });

}

for (var i = 0, l = linkEls.length; i < l; i++) {
  linkEls[i].addEventListener('click', clickHandler, true);
}

window.addEventListener('popstate', function(event) {

  updateContent(event.state);
});

history.replaceState({
  content: contentEl.textContent,
  photo: photoEl.src
}, document.title, document.location.href);

使用jQuery Ajax的HTML5历史记录 - Javascript问题

0 个答案: