Написать внутреннюю ссылку с помощью AJAX

#jquery #ajax #href

Вопрос:

Я пытаюсь написать некоторые из моих первых скриптов jquery, но у меня возникли некоторые проблемы… На моей странице есть длинный текст с большим количеством внутренних ссылок ( <a href="/contents/Foo.htm" class=.internal>Foo</a> ). Я бы хотел, чтобы при нажатии на одну из ссылок .internal путь href открывался внутри <div id="article"> .

 var InternalLink = function() {
    $(".internal").click(function(){
        var path =  $(this).attr("href");
        $.ajax({
            url: "path",
            success: function(data) {
                $('#article').html(data);
            }
        });
    });    
};

Я написал код, показанный ниже, и он работает отлично, но я пытаюсь обобщить код для каждой ссылки с внутренним классом:

 $("#article_01").click(function(){
    $.ajax({
        url: 'contents/article_01.htm',
        success: function(data) {
            $('#article').html(data);
        }
    });
});

Ответ №1:

 <a href="/contents/Foo.htm" class="internal" data-ref="article_01">Foo</a>

JS:

 $(".internal").click(function(){
    var path =  this.href;
    var div = $(this).data('ref');
    $.ajax({
        url: path,
        success: function(data) {
            $('#' div).html(data);
        }
    });
    return false; // so the link does *not* follow through
});

Итак, теперь все, что вам нужно сделать, это изменить data-ref указатель на div, в который вы хотите загрузить html.

1. это не сработает, так как перед именем класса в привязке есть «.». Нужно удалить из html.

2. @scrappedcola спасибо, извините, скопировано прямо из OP — не обращал на это внимания, лол

3. Спасибо, приятель! но что я должен написать внутри href? ссылка на данные — это URL-адрес файла, который я хочу загрузить внутри div, но я не могу понять href. Могу ли я просто поставить «#»? Я попробовал скрипт, но, похоже, он работает неправильно… Я думаю, что path var не содержит правильного пути. В этом примере bit.ly/viKQrD консоль Chrome сообщает мне, что «GET (MyDomain).com/example/path 404 (не найден)»

4. @Nicolaesse извините, что я убрал кавычки path , не знаю, почему они там были. (примечание: сокращенные URL-адреса не одобряются в stack exchange, попробуйте использовать реальные URL-адреса.)

5. @Neal теперь это идеально! Большое вам спасибо!