1

我正在创建一个网站，我想通过 AJAX 动态加载页面。我正在使用History.js，但我认为我做得不太对。

基本上我有一个index.php页面和一些其他页面：portfolio.php、contact.php等等。这些额外的 php 文件包含一个简单的 HTML/PHP 代码，它必须动态替换索引页面中 DIV 的内容，称为#post-content。

当我单击索引页面中的菜单链接时，会通过onClick事件调用 JS 函数showPage()，该函数仅以不带“.php”的页面名称作为参数。该函数声明如下：

function showPage(page) {
    var History = window.History;
    History.pushState(null, page, "index.php?page=" +page);

    $("#post-content").load(page + ".php");
}

在上面的函数中还实现了其他视觉效果，比如fadeIn或fadeOut，但我删除了它们以使代码在这里更具可读性。

该功能为我提供了我需要的一切，或者几乎。使用 Google Chrome 测试我的网站，如果我单击菜单中的特定链接，例如“ portfolio ”，我会正确访问?page=portfolio.php。如果我在浏览器中手动键入 URL（例如，如果其他人给了我指向该页面的直接链接），则不会发生这种情况。这是因为函数 showPage() 没有被调用。

所以我在 index.php 页面上方添加了一个外部代码：

<?php
if(isset($_GET['page'])) { // Checks if the url contains the "page" parameter.
?>

<script>
$(function() {
    showPage('<? echo htmlentities($_GET['page']); ?>');
});
</script>

<?
}
?>

这给了我想要的结果。

在这一点上，我需要专家的建议。我做对了吗？这是在网站内实现 jQuery AJAX 的正确方法吗？我觉得我做错了，非常错误。网络上的 Coes 与我的非常不同，但是一切看起来都运行良好。我该怎么办？

在此讨论中的任何帮助将不胜感激:) 谢谢！

4

1 回答 1

1

我想说的第一件事 - 我说更好的负载在客户端完成所有这些工作 - 所以你只支持一个代码（在客户端）。

但这会在页面加载后导致多次 ajax 调用。您可以通过在示例中将数据包含到 php 代码/模板中来防止这种情况，但在这种情况下，您还需要支持服务器端代码/更改（如果您想从头开始生成页面）

另一种方法不是生成页面，而是仅生成将通过 ajax 获取的数据，并将其包含到页面中，然后将这些数据与 js 一起使用，而不是进行不必要的 ajax 调用。

所以在代码旁边：

所以你可以检查这个fork：https ://github.com/llamerr/history.js/commits/master

如您所见，我只是在 init 中添加了帧加载

//simple function to load iframe (may be done with div and ajax)
function loadiframe() {
    $('#iframe').load('../index.php');
}

和

// Log Initial State
History.log('initial:', State.data, State.title, State.url);
//check for state and load what we need
if (State.data.state == 666) {
    loadiframe();
}

和

// Bind to State Change
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    // Log the State
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    if (State.data.state == 666) {
        loadiframe();
    }                    
    History.log('statechange:', State.data, State.title, State.url);
});

和

History.Adapter.onDomLoad(function(){
    console.log('loaded');
    $('#loadiframe').click(function(){
        History.pushState({state:666,rand:Math.random()}, "State 666", "?state=666");
    });
});

我还没有看过 Backbone，但似乎路线（或类似的东西）是你需要的

http://backbonejs.org/#Router

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

我认为它很神奇，并自动检测必须加载的状态（在加载或历史更改等时）并执行所需的功能

或者也许你可以看看这个解决方案 - http://haithembelhaj.github.com/RouterJs/

RouterJs is a simple router for your ajax web apps. It's build upon History.js

因此，使用 RouterJs 您将拥有相同的 History.js，但具有更多功能。

于 2013-01-05T13:46:45.637 回答