Обновить часть страницы (div)
У меня есть базовый html-файл, который прикреплен к программе java. Эта программа java обновляет содержимое части HTML-файла при каждом обновлении страницы. Я хочу обновить только часть страницы после каждого интервала времени. Я могу разместить часть, которую я хотел бы обновить в div, но я не уверен, как обновить только содержимое div. Любая помощь будет оценена по достоинству. Спасибо.
4 ответов:
используйте Ajax для этого.
создайте функцию, которая будет извлекать текущую страницу через ajax, но не всю страницу, а только соответствующий div с сервера. Затем данные (снова через jQuery) будут помещены в тот же div, о котором идет речь, и заменят старое содержимое новым.
соответствующие функции:
например
$('#thisdiv').load(document.URL + ' #thisdiv');Примечание, загрузка автоматически заменяет содержимое. Обязательно включите пробел перед селектором идентификаторов.
предположим, что у вас есть 2 divs внутри вашего 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 и может возвращать объект данных информации, например (и очень предпочтительно) JSON, есть много учебников там с тем, как это сделать, GSON от Google-это то, что я использовал некоторое время назад, вы могли бы взглянуть на него.
Я не профессионал с получением JAVA POST и возвращением JSON такого рода, поэтому я не собираюсь давать вам пример, но я надеюсь, что это достойное начало.
вам нужно сделать это на стороне клиента, например, с помощью 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 get with Данные ответа JSON:http://jsfiddle.net/t35F9/1/
$.ajax(), $.get(), $.post(), $.load()функции jQuery внутренне отправитьXML HTTPзапрос. среди нихload()для конкретногоDOM Element. Смотрите jQuery Ajax Doc. А детали Q. A. на них здесь .
Comments