Авто селекторы ajax с Jquery

Question

Я пытаюсь создать концептуальный веб-сайт, но я хочу идеальной деградации. Таким образом, я собираюсь сначала кодировать сайт в обычном XHTML, а затем добавить классы и идентификаторы, чтобы подключить их в jQuery.

Одна вещь, которую я хочу сделать, это в конечном итоге включить Ajax xmlhttprequest для всех моих ссылок, чтобы они отображались в div области просмотра. Я хочу, чтобы этот видовой экран был "универсальным" дампом для любого xmlhttprequest с нескольких внешних страниц.

Мне было интересно, смогу ли я жестко закодировать что-то вроде:

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

и т.д.. Итак, как вы можете видеть, я даю все теги ссылок, от которых я хочу вызывать запросы Ajax, с классом ajax. В моем JS, основанном на jQuery, я хочу иметь возможность кодировать его так, чтобы все положительные $ {"a"). Filter (". Ajax") автоматически загружали свои соответствующие hrefs [переменные] как запрос ajax.

Пожалуйста, помогите. Я n00b.

Answer 1

Что-то вроде:

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, поэтому я обновил пример.

Answer 2

На вашем примере вы должны уметь:

$('.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'), чтобы получить ссылку на конкретную ссылку, а затем делаете все, что вам нужно!