Actualizar parte de la página (div)

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.

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

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/

Usa fetchy innerHTMLpara cargar contenido div

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Click here to start refreshing every 2s</button>
</div>

<div id="dynamicPart">Dynamic part</div>

$.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í .