Вопрос по html, refresh, javascript – Обновить часть страницы (div)

75

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

Ваш Ответ

4   ответа
10

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

Классный пример и сделал это легко. Можем ли мы найти какие-либо недостатки с этим? Luigi Lopez
102

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

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

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

например

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

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

Вы уверены, что нам нужен пробел перед тегом #? Я работал на меня, если я удалю #tag. Kurkula
Этот метод имеет большой недостаток. Если вы воспользуетесь этим, и часть страницы перезагрузится, вы не сможете снова выполнить то же действие JQuery / Ajax без перезагрузки всей страницы в браузере. После перезагрузки с помощью этого метода JQuery не инициализируется / не будет работать снова. Marcel Wasilewski
Эй, чувак, только что узнал, что вы пропустили пробел после '(двоеточие правильно?), Этот пример не работал "из коробки" :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv '); David Reinberger
@ Тоухами, нет, не в этом дело. Видеть:jsbin.com/sikiyazeji/edit?html,css,js,output user1721135
@GregHilston вот мой js-код $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); и вот мой HTML <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> контент </ div> </ div> Touhami
15

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

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

Событие делегирования.api.jquery.com/on Jonast92
Ваш пример с Ajax, как вы можете обновить его вживую? TheCrazyProfessor
1

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

Похожие вопросы