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

Question

私は概念証明ウェブサイトを作成しようとしていますが、私は完璧な劣化を望んでいます。このように私は最初にプレーンXHTMLでウェブサイトをコーディングしてから、クラス&を追加してjQueryにフックします。

最終的にはすべてのリンクに対してAjax xmlhttprequestが有効になり、ビューポートdivに表示されます。このビューポートを、複数の外部ページからのxmlhttprequestの「汎用」ダンプにします。私のようなものをハードコーディングすることができるよ場合

私が思っていた：

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

など、あなたが見ることができるように、私はクラスのAjaxでからAjaxリクエストを呼び出したいすべてのリンクタグを与えます。 jQueryに基づいた私のJSでは、すべての正の$ {"a"} filter（ ".ajax"）が自動的にそれぞれのhrefs [変数]を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. 
}); 

$('.ajax')のように読み違える可能性があるため、それは、読むためのコードは少し奇妙になるので、私は「AJAX」とは異なるクラスを使用することをお勧め$.ajax()。

$('.ajax').click()は、ページ上のすべての要素に対してonClickイベントハンドラをクラス「ajax」で登録しています。次に、$(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を使用して簡単に行うことができたため、例を更新しました。