Загрузка страницы с помощью Jquery AJAX

Question

Я хотел бы использовать $ .ajax() для запроса страницы, но загружать только фрагменты этой страницы. Я знаю, вы можете указать, какие фрагменты страницы вы хотите с .load(), но мне было интересно, возможно ли это с помощью $ .ajax?

Answer 1

Вы можете получить свой фрагмент через сообщение, добавить html в div с дисплеем: none; Затем используйте селектор, чтобы получить нужный фрагмент, и добавьте его в область, которую вы хотите отобразить.

воздуха Код:

<div id="tempRegion" style="display:none;"> 

</div> 

$.ajax({ 
    url: "page.htm", 
    type: "GET", 
    success: function(results){ 

     $('#tempRegion').html(results); 

     ... 

     // Now select fragment, append to display area 
     var fragement = $('#someFragment').html(); 

     $('#displayRegion').html(fragement); 

    }) 

}); 

Answer 2

Для тех из вас, кто интересно, stoplion имеет в виду эту особенность: Loading Page Fragments (прокрутите вниз на странице):

В .load метод() , в отличие от $ .get(), позволяет указать часть удаленного документа, который нужно вставить. Это достигается специальным синтаксисом параметра url. Если один или несколько символов пробела включены в строку, часть строки, следующая за первым пространством, считается селектором jQuery, который определяет загружаемый контент.

Поскольку $ .get() не поддерживает его, я предполагаю, что $ .ajax тоже не будет. Простой способ реализовать это было бы следующее:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
     $("#el").html($(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 

Это было бы эквивалентно

$("#el").load('http://example.com/page.html #selector'); 

Однако, обратите внимание, что специальный синтаксис («#selector») означает, что скрипты, присутствующие в загруженный HTML будет не будет выполнен. См. Script Execution в документах .load().

Answer 3

Простое решение с помощью метода загрузки:

$("#menu a").click(function(){ 
    event.preventDefault(); 
    $("#container").load(this.href + " #container p"); 
    return false; 
}); 

использовать только метод Ajax для более сложных сценариев, таких как размещение или получение из файла PHP скрипт или JSON в противном случае он будет замедлять ваш сайт.

Answer 4

Правильный ответ для вас:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
    $("#el").html($(data).append(data).find("#selector")); 
    }, 
    dataType: 'html' 
});