Оновити частину сторінки (div)

У мене є базовий файл html, який прикріплюється до програми Java. Ця програма Java оновлює вміст частини HTML-файлу щоразу, коли сторінку оновлюється. Я хочу оновлювати лише ту частину сторінки після кожного інтервалу часу. Я можу розмістити частину, яку хотів би оновити, у div, але я не впевнений, як оновити лише вміст div. Будь-яка допомога буде вдячна. Дякую.

Для цього використовуйте Ajax.

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

Відповідна функція:

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

напр

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

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

Припустимо, що у вашому файлі html є 2 div.

<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.

Дивіться цю скрипту, яку я для вас зробив, як цікавий приклад, використовуючи 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 щодо них знаходиться тут .