Inserimento di codice HTML con jquery

Question

Inserimento di codice HTML con jquery

#1 da (3 voti)
#2 da (1 voti)
#3 da (1 voti)
#4 da (1 voti)
#5 da (0 voti)

1

Una delle nostre applicazioni Web è una pagina che contiene un numero di serie e varie informazioni vengono restituite e visualizzate all'utente. Il seriale viene passato tramite AJAX e, in base alla risposta, può verificarsi una delle seguenti condizioni:

Viene visualizzato un messaggio di errore
Un nuovo modulo sostituisce il modulo precedente

Ora, il modo in cui sto gestendo questo è usare jQuery per distruggere (usando $ .remove ()) la tabella che mostra il modulo seriale iniziale, quindi aggiungo un'altra tabella html che contiene un altro modulo. In questo momento sto includendo quel modulo aggiuntivo come parte del sorgente html e semplicemente impostandolo per visualizzarlo: none, quindi usare jQuery per mostrarlo quando appropriato. Tuttavia, non mi piace questo approccio perché se qualcuno visualizza l'origine sulla pagina, può vedere il codice html della tabella che non viene visualizzato.

Il mio prossimo pensiero sarebbe quello di utilizzare AJAX per leggere in un altro file HTML e aggiungerlo in questo modo. Tuttavia, sto cercando di tenere a bada il numero di file utilizzati da questo progetto, e dato che la maggior parte delle pagine del nostro progetto useranno AJAX, potrei vedere un caso in cui ci sono più file contenenti frammenti HTML e mi sembra sciatto.

Qual è il modo migliore per gestire un caso in cui più elementi html vengono mostrati e rimossi con jQuery?

php ajax jquery

posta JRizz 16.08.2013 - 22:21

fonte

5 risposte

Leggi altre domande sui tag php ajax jquery

Perché si dovrebbe trasformare un'eccezione controllata in un'eccezione non controllata? [duplicare] In C #, per quanto riguarda le prestazioni, le dimensioni di un oggetto sono importanti quando si accede a uno dei suoi membri tramite un riferimento?

score 3 · Answer 1

l'utilizzo di echo e .html () sono potenziali XSS vettori se usati con qualsiasi tipo di input dell'utente (come il tuo numero di serie).

Suggerirei di utilizzare il template del lato client come mustache js .

$.ajax({
  url: "foo.php",
  type: "post",
  data: values,
  success: function(data){
      var template = $("#formTemplate");
      var html = Mustache.to_html(template, data);
      $('#myDiv').html(html);
  },
  error: function(error){
      "<p>{{error}}</p>";
       var html = Mustache.to_html(template, 
          {'error' : error}
       );
       $('#myDiv').html(html);
  }
}

Questo metodo richiede l'implementazione di "formTemplate" come modello di baffi, ma offre tre vantaggi

Moustache esegue l'escape per impedire attacchi XSS
HTML e i modelli sono ora selezionabili (solo le modifiche a foo.php)
Separa la presentazione dai dati

score 1 · Answer 2

Ho fatto qualcosa di simile inviando il nuovo codice HTML con la risposta in un oggetto JSON. Qualcosa come questa domanda .

echo '{"html": "<p>I\'m the markup</p>"}';

Quindi sostituendo l'HTML in questo modo:

$.ajax({
    url: "foo.php",
    type: "post",
    data: values,
    success: function(data){
        $("#myDiv").html(data.html);
    }
});

score 1 · Answer 3

1

Sì, questo è giusto, puoi usare l'utente per evitare il problema di IE

echo '<p>this is your html</p>'

Codice Js

$.ajax({
url: "ajax.php",
type: "post",
data: values,
success: function(data){
    $("#myDiv").html($.trim(data));
}})

risposta data 31.10.2013 - 09:19

fonte

score 1 · Answer 4

Non aver paura di più file HTML con responsabilità specifiche. Anche se si utilizza un motore di template js, suggerirei comunque di separare questi "snippet" nei propri file. Quando si modifica un modulo, non è necessario preoccuparsi del markup della voce seriale. La separazione delle preoccupazioni si applica anche ai componenti dell'interfaccia utente.

score 0 · Answer 5

Puoi usare la funzione jQuery beforeSend e cancellare prima tutti gli elementi che vuoi aggiornare

codice di esempio

Risposta json:

    var formData = {
        param1: value1,
        param2: value2
    };

    $.ajax({
        type: "POST",
        url: 'your_query.php',
        data: formData,
        dataType: "json",
        beforeSend: function() {
            // #msg is div for example
            $('#msg').html("your notification here to start the process");

            // clear element first before updating
            $('#element_to_update').html("");
            $('#error_element').html("");
        },
        success: function(response) {
            // response.success will evaluate if true or false from server side
            // response.msg is from server side response message

            $('#msg').html("<p>process done here</p>"); // p tag
            if (response.success == true) {
                $('#element_to_update').html(response.msg);
                // any process to execute
            } else {
                $('#error_element').html(response.msg);
                // any process to execute
            }

        }
    });

risposta semplice o eco dal lato server

$.ajax({
    type: "POST",
    url: 'your_query.php',
    data: formData,
    beforeSend: function() {
        // #msg is div for example
        $('#msg').html("your notification here to start the process");
    },
    success: function(response) {
        // response is from server side response
        $('#msg').html("<span>process done here</span>"); // span tag
        $('#element_to_update').html(response);
    }
});