Обновить часть страницы (div)


93

У меня есть базовый файл HTML, который прикреплен к программе Java. Эта Java-программа обновляет содержимое части HTML-файла при каждом обновлении страницы. Я хочу обновлять только эту часть страницы после каждого интервала времени. Я могу поместить ту часть, которую хочу обновить, в файл div, но я не уверен, как обновить только содержимое div. Любая помощь будет оценена. Спасибо.

Ответы:


119

Используйте для этого Ajax.

Создайте функцию, которая будет получать текущую страницу через ajax, но не всю страницу, а только нужный div с сервера. Затем данные (снова через jQuery) будут помещены в тот же рассматриваемый div и заменят старый контент новым.

Соответствующая функция:

http://api.jquery.com/load/

например

$('#thisdiv').load(document.URL +  ' #thisdiv');

Обратите внимание, загрузка автоматически заменяет контент. Не забудьте поставить пробел перед селектором идентификатора.


6
Привет, чувак, только что узнал, что вам не хватает пробела после '(двоеточие, верно?), Этот пример не работал из коробки :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv ');
Дэвид Рейнбергер

16
У этого метода есть большой недостаток. Если вы используете это, и часть страницы перезагружается, вы не сможете снова выполнить то же действие JQuery / Ajax без перезагрузки всей страницы в браузере. После перезагрузки этим методом JQuery не инициализируется / больше не будет работать.
Марсель Василевски

2
вы уверены, что нам нужен пробел перед тегом #? У меня сработало, если убрать # тег.
Куркула

2
@GregHilston вот мой код js $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); а вот мой HTML-код <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Content </div> </div>
Touhami

2
$('#thisdiv').load(document.URL + ' #thisdiv>*')предотвращает наличие другого #thisdivвнутри оригинала#thisdiv
Питер

17

Предположим, у вас есть 2 div внутри вашего html файла.

<div id="div1">some text</div>
<div id="div2">some other text</div>

Сама программа java не может обновлять содержимое файла html, потому что html связан с клиентом, в то время как java связана с серверной частью.

Однако вы можете обмениваться данными между сервером (серверной частью) и клиентом.

Мы говорим о AJAX, которого вы достигаете с помощью JavaScript, я рекомендую использовать jQuery, которая является обычной библиотекой JavaScript.

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

setInterval(function()
{
    alert("hi");
}, 30000);

Вы также можете сделать это так:

setTimeout(foo, 30000);

Whereea foo - это функция.

Вместо предупреждения («привет») вы можете выполнить запрос AJAX, который отправляет запрос на сервер и получает некоторую информацию (например, новый текст), которую вы можете использовать для загрузки в div.

Классический AJAX выглядит так:

var fetch = true;
var url = 'someurl.java';
$.ajax(
{
    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data : 
    {
        'fetch' : fetch // You might want to indicate what you're requesting.
    },
    success : function(data)
    {
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        {
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        }
    },
    complete : function(data)
    {
        // do something, not critical.
    }
});

В то время как серверная часть может получать данные POST и может возвращать информационный объект данных, например (и очень предпочтительно) JSON, существует множество руководств о том, как это сделать, GSON от Google - это то, что я использовали некоторое время назад, вы могли бы взглянуть на это.

Я не профессионал в получении Java POST и возврате JSON такого рода, поэтому я не собираюсь приводить вам пример с этим, но надеюсь, что это хорошее начало.


Ваш пример Ajax, как заставить его обновляться вживую?
TheCrazyProfessor

10

Вам нужно сделать это на стороне клиента, например, с помощью jQuery.

Допустим, вы хотите получить HTML-код в div с идентификатором mydiv:

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

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

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

На стороне сервера вам необходимо реализовать обработчик поступающих запросов /api/mydivи вернуть фрагмент HTML, который находится внутри mydiv.

См. Этот Fiddle, который я сделал для вас, как забавный пример использования jQuery get с данными ответа JSON: http://jsfiddle.net/t35F9/1/


Классный пример и облегчил. Можем ли мы найти в этом какие-либо недостатки?
Луиджи Лопес

3

Используйте fetchи innerHTMLдля загрузки содержимого div


1

$.ajax(), $.get(), $.post(), $.load()функции jQuery внутренне отправляют XML HTTPзапрос. среди них он load()предназначен только для определенного DOM Element. См. JQuery Ajax Doc . Подробности QA по ним здесь .

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.