Как сделать частичное обновление страницы с помощью jQuery?

Question

У меня есть меню навигации. При щелчке обновляется только div содержимого страницы из файла содержимого html (который находится на сервере) без полного обновления страницы.

Как мне добиться этого с помощью jQuery?

Answer 1

Создайте свое меню как обычно, то есть

<ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

И заполнитель для содержимого.

<div id="content"></div>

Затем запустите код, подобный этому

$("#menu li a").click(function(e) {
    // prevent from going to the page
    e.preventDefault();

    // get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        // do something after content has been loaded
    });
});

Answer 2

$('#myLink').click(function(){
   $.get('url.php', function(data){ // or load can be used too
       $('#mydiv').html(data);
   });
});

Answer 3

Для этого вам нужно использовать методы jQuery AJAX. Есть несколько способов сделать это. Например:

Скажем, у вас есть div с id = "mydiv", который вы хотите обновить с помощью контента с сервера. Тогда:

  $("#mydiv").load("url");

приведет к обновлению mydiv содержимым, возвращаемым из URL.

Эта ссылка описывает различные методы AJAX в jQuery.

Answer 4

создайте элемент div и обновите содержимое.

<div id="refreshblock"> </div> предположите, что это блок

при нажатии кнопки, выполните вызов ajax и получите результаты, как только вы получитерезультаты обрабатывают их и обновляют вышеупомянутый div

('#refreshoblock).html(results);

Это обновит страницу, не делая сообщения назад

Answer 5

См. load

Описание: загрузить данные с сервера и поместить полученный HTML-код в соответствующий элемент.

Answer 6

вы можете сделать это с помощью jquery (AJAx)

    <div id="leftDiv">
<s:include value="/pages/profile.jsp"></s:include>
</div>
<div>
<a href="#" id="idAnchor">Partial Refresh</a>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#idAnchor').click(function(){

$.ajax({
         url: 'getResultAction', // action to be perform
         type: 'POST',       //type of posting the data
         data: { name: 'Jeetu', age: '24' }, // data to set to Action Class
         dataType: 'html',
         success: function (html) {
         ('#leftDiv).html(html); //set result.jsp output to leftDiv 
    },
     error: function(xhr, ajaxOptions, thrownError){
       alert('An error occurred! ' + thrownError);
    },
  });
 });
})
</script>

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