1

AJAX を介してページを動的にロードする Web サイトを作成しています。私はHistory.jsを使用していますが、私はそれを正しく行っていないと思います。

基本的に、index.phpページと他のいくつかのページ ( portfolio.php、contact.phpなど) があります。これらの追加の php ファイルに含まれているのは、 #post-contentと呼ばれるインデックス ページの DIV のコンテンツを動的に置き換える必要がある単純な HTML/PHP コードです。

インデックス ページのメニュー リンクをクリックすると、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 でウェブサイトをテストし、メニューの特定のリンク (「ポートフォリオ」など) をクリックすると、正しく?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>

<?
}
?>

これにより、私が望む結果が得られます。

この時点で、専門家のアドバイスが必要です。私はそれを正しくやっていますか？これは、Web サイト内に jQuery AJAX を実装する正しい方法ですか? 私はそれを間違っていると思います、非常に間違っています。Web 上の Coes は私のものとは大きく異なりますが、すべてうまく機能しているように見えます。私は何をすべきか？

この議論の助けをいただければ幸いです:) ありがとうございます!

4

1 に答える 1

1

最初に言いたいのは、クライアント側でこれらすべてをロードする方がよいと言いました。したがって、(クライアント側で) 1 つのコードのみをサポートします。

ただし、これにより、ページの読み込み後に複数の ajax 呼び出しが発生します。例のようにphpコード/テンプレートにデータを含めることでこれを防ぐことができますが、この場合はサーバー側のコード/変更もサポートする必要があります(ページを最初から生成したい場合)

ページではなく、ajax 経由でフェッチされるデータのみを生成し、それをページに含めてから、不要な ajax 呼び出しを行う代わりに、そのデータを js で使用する別の方法。

次のコード:

したがって、このフォークを確認できます: 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");
    });
});

バックボーンはまだ見ていませんが、ルート（またはこのようなもの）が必要なようです

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 に答える