¿Cuál es la forma correcta de actualizar todos los elementos de una página representada a través de AJAX?

StackOverflow https://stackoverflow.com/questions/2342930

  •  23-09-2019
  •  | 
  •  

Pregunta

Tengo una página complicada que se queden por PHP y me gustaría mantener todos los elementos de la página al día a través de AJAX sondeo largo. ¿Hay algún tipo de modo general / inteligente para diseñar una infraestructura para apoyar esto sin tener que especificar manualmente cada elemento de actualización? Sólo en busca de ideas. Gracias!

¿Fue útil?

Solución

El uso de jQuery, enviaría una lista separada por comas de los selectores de jQuery de actualización al servidor. El servidor se responden en última instancia mediante la lectura de los selectores y producir el código HTML para llenar los elementos que coinciden con los selectores:

$.get("/updater", { elementsToUpdate: "#someDiv,#someTable,#someOtherElement"}, function(json) {
      $.each(json, function(k, v) {

        // the key is the selector, the value is the 
        // HTML to set to that (or those) element(s):
        $(k).html(v);
      });    
}, "json"); // we are expecting the server to return JSON

El servidor responderá enviando JSON para el cliente con la siguiente estructura:

 {"#someDiv":"this is some HTML to fill up div with ID someDiv","#someOtherElement":"here is some more HTML","#someTable":"here is some more HTML"}

Otros consejos

tal vez añadir una clase especial a todos los elementos para ser actualizados a través de AJAX, y también se puede codificar datos adicionales en algunos otros atributos, por ejemplo

<a class="ajaxUpdate" data="{'a':'json or whatever', 'put whatever here':'ok'}">test</a>

luego con jQuery que puede fácilmente sacar esos datos y eval, y utilizarlo en su ajax

Se puede sondear una página que devuelve la estructura JSON-codificada de la página, por ejemplo:

var page = {
    'elem1': {
        'html': '<div>... ',
        'update': True
    },
    'elen2': {
        'update': False

y así sucesivamente, a continuación, actualizar lo que es necesario, tener sólo una encuesta.

Mantenga su estructura de páginas como elementos de datos privados y públicos tienen los elementos para ponerlos al día

var page = (function(){
    var private_data = {
    //json
    };

    return {
        workOnData : function(){//process the data}

    }
})()

Esta es la forma buena que pueda mantener sus datos de páginas segura y sin problemas.

Me haría uso de jQuery para hacer eso si fuera tú o: entonces se podría hacer algo así ...

$('div.updateThisClass').css('color','#fff')

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top