javascript - style - title html

Actualizar parte de la página(div)

Question

Tengo un archivo html básico que se adjunta a un programa de Java. Este programa java actualiza los contenidos de una parte del archivo HTML cada vez que se actualiza la página. Quiero actualizar solo esa parte de la página después de cada intervalo de tiempo. Puedo colocar la parte que me gustaría actualizar en un div, pero no estoy seguro de cómo actualizar solo el contenido del div. Cualquier ayuda sería apreciada. Gracias.

Answer 1

Necesitas hacer eso en el lado del cliente, por ejemplo, con jQuery.

Digamos que quieres recuperar HTML en div con ID mydiv :

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

Puede actualizar esta parte de la página con jQuery de la siguiente manera:

$.get(''/api/mydiv'', function(data) {
  $(''#mydiv'').html(data);
});

En el lado del servidor, debe implementar el controlador para las solicitudes que lleguen a /api/mydiv y devolver el fragmento de HTML que se encuentra dentro de mydiv.

Vea este violín que hice para usted para un ejemplo divertido usando jQuery get con datos de respuesta JSON: http://jsfiddle.net/t35F9/1/

Answer 2

Supongamos que tiene 2 divs dentro de su archivo html.

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

El programa java en sí no puede actualizar el contenido del archivo html porque el html está relacionado con el cliente, mientras tanto, java está relacionado con el back-end.

Sin embargo, puede comunicarse entre el servidor (el back-end) y el cliente.

De lo que estamos hablando es de AJAX, que logras usando JavaScript, te recomiendo usar jQuery, que es una biblioteca común de JavaScript.

Supongamos que desea actualizar la página cada intervalo constante, luego puede usar la función de intervalo para repetir la misma acción cada x vez.

setInterval(function()
{
    alert("hi");
}, 30000);

También podrías hacerlo así:

setTimeout(foo, 30000);

Whereea foo es una función.

En lugar de la alerta ("hola") puede realizar la solicitud AJAX, que envía una solicitud al servidor y recibe cierta información (por ejemplo, el nuevo texto) que puede usar para cargar en el div.

Un AJAX clásico se ve así:

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.
    }
});

Cuando el backend puede recibir datos POST y puede devolver un objeto de información de datos, por ejemplo (y muy preferible) JSON, hay muchos tutoriales con respecto a cómo hacerlo, GSON de Google es algo que yo usado hace un tiempo, podrías echarle un vistazo.

No soy profesional con Java POST recibiendo y JSON regresando de ese tipo, así que no voy a dar un ejemplo con eso, pero espero que este sea un comienzo decente.

Answer 3

Usa Ajax para esto.

Cree una función que capture la página actual mediante ajax, pero no toda la página, solo el div en cuestión del servidor. Los datos se colocarán (de nuevo a través de jQuery) dentro del mismo div en cuestión y reemplazarán el contenido antiguo por uno nuevo.

Función relevante:

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

p.ej

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

Tenga en cuenta que la carga reemplaza automáticamente el contenido. Asegúrese de incluir un espacio antes del selector de id.

Answer 4

$.ajax(), $.get(), $.post(), $.load() de jQuery envían internamente la solicitud XML HTTP . entre ellos, la load() solo está dedicada a un DOM Element particular. Ver jQuery Ajax Doc . Un control de calidad detallado sobre estos está Here .