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



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

1220   4  

4 ответов:

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

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

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

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

например

$('#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

    Ничего не найдено.