Jqueryを使用した自動Ajaxセレクター

Question

概念実証のWebサイトを作成しようとしていますが、完全な劣化が必要です。そのため、最初にプレーンなXHTMLでWebサイトをコーディングし、次にクラスとアンプを追加します。 IDをjQueryでフックします。

私がやりたいことの1つは、最終的にすべてのリンクに対してAjax xmlhttprequestを有効にして、ビューポートdivに表示することです。このビューポートを「ユニバーサル」にしたい複数の外部ページからのxmlhttprequestのダンプ。

次のようなハードコードができるかどうか疑問に思っていました：

<a href="blah.html" class="ajax">, <a href="bleat.html" class="ajax">

などご覧のとおり、クラスajaxでAjaxリクエストを呼び出したいすべてのリンクタグを指定します。 jQueryに基づくJSでは、すべての正の$ {＆quot; a＆quot;）。filter（＆quot..ajax＆quot;）がそれぞれのhref [変数]をajaxリクエストとして自動的にロードするようにコーディングできます。

助けてください。私はn00bです。

Answer 1

例を使用すると、次のことができるはずです。

$('.ajax').click(function () { 
    // Your code here. You should be able to get the href variable and
    // do your ajax request based on it. Something like:
    var url = $(this).attr('href');
    $.ajax({
        type: "GET",
        url: url
    });
    return false; // You need to return false so the link
                  // doesn't actually fire.
});

＆quot; ajax＆quot;とは異なるクラスを使用することをお勧めします。 $（ '。ajax'）は $。ajax（）として誤読される可能性があるため、コードを読むのが少しおかしくなるためです。

$（ '。ajax'）。click（）部分は、ページのすべての要素のonClickイベントハンドラーをクラス＆quot; ajax＆quot;に登録します。それはまさにあなたが望むものです。次に、 $（this）.attr（ 'href'）を使用して、クリックされた特定のリンクのhrefを取得し、必要な操作を行います！

Answer 2

次のようなもの：

function callback(responseText){
    //load the returned html into a dom object and get the contents of #content
    var html = $('#content',responseText)[0].innerHTML;
    //assign it to the #content div
    $('#content').html(html);
}

$('a.ajax').click(function(){
    $.get(this.href, callback);
    return false;
});

ナビゲーションが複数回表示されないように、＃content divの外側にあるすべてを解析する必要があります。正規表現について考えていましたが、おそらくjQueryを使用してそれを行う方が簡単だったので、例を更新しました。