Actualizar parte de la página (div)

93

Tengo un archivo html básico que está adjunto a un programa java. Este programa Java actualiza el contenido de 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.

usuario760220
fuente

Respuestas:

119

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.

usuario1721135
fuente
6
Oye, acabo de descubrir que te falta un espacio después de '(dos puntos, ¿verdad?), Este ejemplo no funcionó de inmediato :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv ');
David Reinberger
16
Este método tiene una gran desventaja. Si usa esto y la parte de la página se vuelve a cargar, no puede volver a realizar la misma acción de JQuery / Ajax sin volver a cargar la página completa en el navegador. Después de la recarga con este método, JQuery no se inicializa / no volverá a funcionar.
Marcel Wasilewski
2
¿Estás seguro de que necesitamos un espacio antes de la etiqueta #? Trabajé para mí si elimino #tag.
Kurkula
2
@GregHilston aquí está mi código js $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); y aquí está mi <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Contenido </div> </div>
HTML
2
$('#thisdiv').load(document.URL + ' #thisdiv>*')evita tener otro #thisdivdentro del original#thisdiv
Peter
17

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

Mientras que 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.

Jonast92
fuente
Su ejemplo de Ajax, ¿cómo se actualiza en vivo?
TheCrazyProfessor
10

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 /api/mydivy devolver el fragmento de HTML que va dentro de mydiv.

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

jsalonen
fuente
Buen ejemplo y lo hizo fácil. ¿Podríamos encontrar alguna desventaja con esto?
Luigi Lopez
3

Usa fetchy innerHTMLpara cargar contenido div

Kamil Kiełczewski
fuente
1

$.ajax(), $.get(), $.post(), $.load()funciones de jQuery envían XML HTTPsolicitudes internamente . entre estos, el load()solo está dedicado a un particular DOM Element. Consulte jQuery Ajax Doc . Un control de calidad de detalles sobre estos están aquí .

Sr. Mak
fuente