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

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

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

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

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

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

например

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

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

Предположим, у вас есть 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 такого рода, поэтому я не собираюсь приводить вам пример с этим, но надеюсь, что это хорошее начало.

Вам нужно сделать это на стороне клиента, например, с помощью 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/

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

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Click here to start refreshing every 2s</button>
</div>

<div id="dynamicPart">Dynamic part</div>

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