Saltar al contenido

Actualizar parte de la página (div)

Solución:

Utilice Ajax para esto.

Cree una función que obtenga la página actual a través de ajax, pero no toda la página, solo el div en cuestión del servidor. Luego, los datos (nuevamente a través de jQuery) se colocarán 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.

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 que 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 se logra usando JavaScript, 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 veces.

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

También puedes 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.
    }
});

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

No soy un profesional con la recepción de Java POST y el retorno de JSON de ese tipo, por lo que no les daré un ejemplo con eso, pero espero que este sea un comienzo decente.

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

Digamos que desea 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 un controlador para las solicitudes que llegan a /api/mydiv y devolver el fragmento de HTML que va dentro de mydiv.

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

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *