Auto Ajax-Selektoren mit JQuery

Question

Ich versuche, eine Proof of Concept Website zu machen, aber ich will perfekten Abbau. Als solche werde ich die Website im Klar XHTML zuerst codieren und fügen Sie dann Klassen & IDs sie in jQuery einzuhaken.

Eine Sache, die ich tun möchte, ist schließlich Ajax xmlhttprequest für alle meine Links aktivieren, so dass sie in einem Ansichtsfenster div anzuzeigen. Ich möchte dieses Ansichtsfenster ein „universal“ Dump für jede xmlhttprequest von mehreren externen Seiten sein.

ich mich gefragt, ob ich in der Lage bin, etwas zu hart codieren wie:

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

usw. So wie Sie sehen können, gebe ich alle Link-Tags, die ich Ajax-Anfragen von der Klasse Ajax anrufen möchten. In meinem JS basiert auf jQuery, möchte ich in der Lage sein, es zu codieren, so dass alle positiven $ { "a"). Filter ( "ajax") wird automatisch ihre jeweiligen hrefs [Variable] als Ajax-Anforderung geladen werden.

Bitte helfen. Ich bin ein n00b.

Answer 1

Mit Ihrem Beispiel sollten Sie in der Lage zu tun:

$('.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.
});

Ich würde vorschlagen, eine Klasse unterscheidet sich von „Ajax“ verwenden, weil es der Code ein wenig seltsam macht zu lesen, weil $('.ajax') als $.ajax() falsch interpretiert werden könnten.

Der $('.ajax').click() Teil registriert einen onClick-Ereignishandler für jedes Element auf der Seite mit der Klasse „Ajax“, das ist genau das, was Sie wollen. Dann nutzen Sie $(this).attr('href') die href des jeweiligen Link zu erhalten geklickt haben und dann tun, was Sie brauchen!

Answer 2

So etwas wie:

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;
});

Sie müssen alles analysieren, die außerhalb des #content div ist, so dass die Navigation nicht mehr als einmal angezeigt wird. Ich war über einen regulären Ausdruck zu denken, aber wahrscheinlich einfacher zu verwenden jQuery es zu tun, damit ich das Beispiel aktualisiert.