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

Ответ 1

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

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

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

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

например

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

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

Ответ 2

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

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

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

Вы можете, однако, обмениваться информацией между сервером (back-end) и клиентом.

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

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

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

Ответ 3

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

Посмотрите этот скрипт, который я сделал для вас для забавного примера, используя jQuery для получения данных ответа JSON: http://jsfiddle.net/t35F9/1/

Ответ 4

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

Ответ 5

pure js: используйте 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.style.visibility= "hidden";
  dynamicPart.innerHTML="Loading..."
  dynamicPart.innerHTML=await(await fetch(url)).text();
  setTimeout(refresh,4000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Start refreshing (4s)</button>
</div>

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