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

Question

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

Answer 1

Использование Ajax для этого.

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

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

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

например,

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

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

Answer 2

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

Допустим, вы хотите, чтобы получить HTML в DIV с ID 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/

Answer 3

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

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

Java-программа сама по себе не может обновить содержимое HTML-файла, так как HTML связан с клиентом, тем временем Java связана с фоновым.

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

Что мы говорим о 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'ed и способен возвращать объект данных информации, например (и очень preferrable) JSON, там есть много учебных пособий, где это делается, GSON от Google - это то, что я использовал некоторое время назад, вы можете взглянуть на него.

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

Answer 4

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