Question

我正在创建一个网站，我希望通过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 ，但我删除它们以使代码在这里更具可读性。

这个功能给了我所需要的一切，或几乎所有。使用谷歌浏览器测试我的网站，如果我点击菜单中的特定链接，例如“投资组合”，我会正确地访问？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与我的非常不同，但是一切看起来都很好。我该怎么办？

非常感谢本次讨论中的任何帮助:)谢谢！

Answer 1

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

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

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

紧接着代码：

所以你可以检查这个分叉：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，但功能更少。

正确使用History.js和AJAX动态加载

1 个答案: