JQuery загрузить контент по ссылке с Ajax

Question

У меня есть элемент -link, имеющий ссылку href на страницу, но я должен использовать Ajax для загрузки этого содержимого из href -url и не перенаправлять пользователя на эту страницу. Как я могу изменить свою ссылку, чтобы просто загрузить контент с этой ссылки, чтобы я мог добавить этот контент на текущую страницу?

<a class="bind-jquery-event-here-class" href="http://webpage.com">Link</a>

Я сделал это, но это не работает.

$(".bind-jquery-event-here-class").bind("click", function() {       
    var url = $(this)attr("href").val();
    var content = $.load(url);
    alert(content);
});

Answer 1

Функция load не предназначена для сбора ответа на запрос, эта функция используется для загрузки HTML из удаленного файла и внедрения его в элемент DOM, например:

$('a').bind('click', function(e) {           
  var url = $(this).attr('href');
  $('div#container').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});

Если вы обрабатываете события щелчка якорных элементов, браузер не должен переходить по ссылке href.

Также имейте в виду, что запрос Ajax может быть выполнен только в том же домене из-за Одинаковой политики происхождения .

Answer 2

Есть несколько проблем с вашим кодом:

1) вы не указали аргумент вашей анонимной функции. Аргумент это событие (здесь: клик). это понадобится вам позже, чтобы отключить 'нормальный' поведение клика:

   $("a.bind-jquery-event-here-class").bind("click", function(event) {
       event.preventDefault();

2) Для чтения href вам не нужно val(). (val() для чтения содержимого из полей ввода.)

   var url = $(this).attr("href");

3) A в AJAX обозначает асинхронный. для вашего кода это означает: просто загрузить запускает загрузку данных с сервера, но не ждет до его завершения. Вы должны определить функцию обратного вызова , которая обрабатывает данные, когда они наконец поступают.

4) load для выполнения вызова AJAX и вставки результата в DOM. Вы не можете использовать его для предупреждения. вместо этого используйте $ .ajax, если вам действительно нужно предупреждение.

5) вы не можете загружать дополнительные URL-адреса через AJAX, ваш вызов AJAX может вернуться только к вашему собственный сервер. если вам нужно загрузить материал с другого сервера, вы должны использовать сервер скрипт в качестве прокси. вот как вы называете прокси:

    $.ajax({
       type: "POST",
       url: "proxy.php",
       data: "url="+url, 
       success: function(data){
           alert("finally got data " + data);
       }
     });

и вот пример прокси в php.

<?php
error_reporting (E_ALL ^ E_NOTICE);
if ( isSet($_POST['url']) ) {
  if( true == ($str=file_get_contents( $_POST['url'] ) )) {
    echo $str;
    exit;
  }
} 
echo "could not read page"; 
?>

Слово предупреждения относительно php: file_get_contents может быть отключено на вашем сервере.

Вот полный javascript-код, используемый для тестирования:

  $(document).ready(function(){

    $("a.bind-jquery-event-here-class").bind("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href");
        alert("loading via proxy: " + url);
    $.ajax({
      type: "POST",
      url: "proxy.php",
      data: "url="+url, 
      success: function(data){
        alert("finally got data " + data);
      }
    });
    });

});

Answer 3

ЕСЛИ у вас есть целое меню с такими ссылками, вы можете сделать это выбрав каждый дочерний элемент в меню контейнера div прикрепить к нему событие onclick

$('#Menu >*').each(function(){<br>
        $(this).bind('click',function(e){<br>
            var el = e.target<br>
            if(el.nodeName ==="A"){<br>
                fireMenuLink(el.href);<br>
            }<br>
            return false;<br>
        });<br>
    });

Вы должны всегда возвращать false в jQuery, чтобы подавить поведение тега по умолчанию

function fireMenuLink(){<br>
$("#container_element_ID").load(url,function(){<br>
//Do something like hide the loader<br>
        $('loaderStatus').hide();<br>
    });<br>
}

Это удобно, если вы хотите разработать экран, который имеет поддержку со стороны сервера, и вы хотите динамически загружать содержимое экрана при управлении историей браузера с помощью URL-адреса фрагмента. Существует множество библиотек, которые вы можете использовать для управления содержимым экрана, используя фрагменты URL в разных браузерах. И в jQuery, и в других случаях.

Надеюсь, это поможет
Приветствия:)