Toggle sidebar Toggle sidebar

DOMANDA Scambio dati JSON tra Node.js e Ajax.

G

Giulio95

Nuovo Utente
25
3
Salve a tutti

Ho un FORM HTML di cui vi mostro il codice:
Cattura.GIF

Il server verifica che il "codice" inserito esista o meno sul DataBase, e restituisce un oggetto di risposta con la funzione res.json():
Cattura.GIF

Ottengo la risposta visualizzata sul browser:
Cattura.GIF
Ovviamente io vorrei visualizzare i dati del JSON sulla pagina contenente il FORM HTML.

Il JSON ha due proprietà:
msg: messaggio da visualizzare.
field: id <div> HTML in cui visualizzare il messaggio

La mia idea era di usare Ajax, ma non capisco come posso captare la risposta JSON, e inibire l'azione del FORM, restituendo solo il messaggio all'utente, senza ricaricare la pagina.

Di seguito il codice jQuery che ho provato ad utilizzare, ma non funziona, mancano sicuramente molte cose ma non trovo info al riguardo, e sicuramente non rileva il file JSON inviato dal server:
Cattura.GIF

Se conoscete la risposta ve ne sarei grato.
Apprezzerei tantissimo anche risorse e tutorial che ne parlano, io ho girato sul Web ma non ho trovato nulla che mi sbloccasse.

Grazie
 
daniel_tex

daniel_tex

Utente Attivo
63
13
Ciao,
benvenuto nel forum...

JavaScript: 
var obj = $.parseJSON(risposta);
var str = '';
     $.each(obj, function(i, val){
         str += val;
    });
$('#messaggi').html(str);

Nell'url di ajax ci devi mettere la chiamata all'api passando i parametri. "/ajax/contact" cos'è? I parametri dove lì passi?

Sei sicuro se il server non ti restituisce un json va in error? Secondo me no! Va in error quando la chiamata va in timeout o non ha nessuna risposta. Comunque ti consiglio di impostare un timeout alla chiamata perché l'utente non è che può aspettare 10 minuti prima di avere una risposta. Quindi quando sei sicuro che la funzione in jquery è fatta bene imposta un "timeout: 3000," cioè se il server non dà risposta entro 3 secondi va in error.

Per gestire eccezione del json puoi utilizzare try così:

JavaScript: 
try {
   var obj = $.parseJSON(risposta);
   var str = '';
      $.each(obj, function(i, val){
         str += val;
      });
   $('#messaggi').html(str);
}catch(error){
   alert('Errore interno al server!!!');
OPPURE
   $('#messaggi').html('Errore interno al server!!!');
SE VUOI FAR VEDERE L'ERRORE SOSTIUISCI LA STRINGA CHE SCRIVI CON error PERO' A L'UTENTE INTERESSA POCO QUINDI IO
LASCEREI LA DICITURA ERRORE INTERNO AL SERVER O VEDI TU! :-P
}

Dove hai il div come il nome messaggi dagli anche id="messaggi"!
Il div dei messaggi portalo fuori dal form, potresti anche non utilizzare il form! :-)
Ho fatto 1 esempio veloce per farti capire. Poi fallo carino da mostrare

Potresti gestire la cosa più semplicemente.
Restituendo una stringa in HTML oppure un JSON con un record con la stringa in HTML.

Vedi te come ti è più comodo!

Ciao
 
Ultima modifica:
daniel_tex

daniel_tex

Utente Attivo
63
13
Ti faccio vedere come faccio una chiamate:
Codice: 
$(document).ready(function(){
    $("#Login").submit(function(){
        var user = $("#user").val();
        var pwd = $("#password").val();

        if (user!="" && pwd!=""){
            $.ajax({
                type: "POST",
                url: "api/login.php",
                data: {"user": user, "pwd": pwd},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    if (response===0){
                        $("#msg").html("<h3 style='color:red;'>Utente o password non valido!!</h3>");
                    }
                    if (response===1){
                        $("#msg").html("<h3 style='color:red;'>Credenziali non valide!!!</h3>");
                    }
                    if (response===2){
                        window.location.replace("area-riservata/");
                    }
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                }
            });
   
        }else{
            $("#msg").html("<h3 style='color:red;'>Utente o password non valido!!</h3>");
            return false;
        }
       return false;
    });
});

OPPURE:

Codice: 
$(document).ready(function(){
    $("#Login").submit(function(){
        var user = $("#user").val();
        var pwd = $("#password").val();

        if (user=="" && pwd==""){
            $("#msg").html("<h3 style='color:red;'>Utente o password non valido!!</h3>");
            return false;
       }

            $.ajax({
                type: "POST",
                url: "api/login.php",
                data: {"user": user, "pwd": pwd},
                datatype: "html",
                contentType: 'application/x-www-form-urlencoded',
                timeout: 3000,
                success: function(response){
                    if (response===0){
                        $("#msg").html("<h3 style='color:red;'>Utente o password non valido!!</h3>");
                    }
                    if (response===1){
                        $("#msg").html("<h3 style='color:red;'>Credenziali non valide!!!</h3>");
                    }
                    if (response===2){
                        window.location.replace("area-riservata/");
                    }
                },
                error: function(){
                    alert("Chiamata fallita, si prega di riprovare....");
                }
            });
       return false;
    });
});
Spero di essere stato chiaro e soprattutto di aiuto...

Ariciao....
 
Ultima modifica da un moderatore:
G

Giulio95

Nuovo Utente
25
3
daniel_tex ha detto:
Ciao,
benvenuto nel forum...

var obj = $.parseJSON(risposta);
var str = '';
$.each(obj, function(i, val){
str += val;
});
$('#messaggi').html(str);

Nell'url di ajax ci devi mettere la chiamata all'api passando i parametri. "/ajax/contact" cos'è? I parametri dove lì passi?

Sei sicuro se il server non ti restituisce un json va in error? Secondo me no! Va in error quando la chiamata va in timeout o non ha nessuna risposta. Comunque ti consiglio di impostare un timeout alla chiamata perché l'utente non è che può aspettare 10 minuti prima di avere una risposta. Quindi quando sei sicuro che la funzione in jquery è fatta bene imposta un "timeout: 3000," cioè se il server non dà risposta entro 3 secondi va in error.

Per gestire eccezione del json puoi utilizzare try così:

try {
var obj = $.parseJSON(risposta);
var str = '';
$.each(obj, function(i, val){
str += val;
});
$('#messaggi').html(str);
}catch(error){
alert('Errore interno al server!!!');
OPPURE
$('#messaggi').html('Errore interno al server!!!');
SE VUOI FAR VEDERE L'ERRORE SOSTIUISCI LA STRINGA CHE SCRIVI CON error PERO' A L'UTENTE INTERESSA POCO QUINDI IO
LASCEREI LA DICITURA ERRORE INTERNO AL SERVER O VEDI TU! :-P
}

Dove hai il div come il nome messaggi dagli anche id="messaggi"!
Il div dei messaggi portalo fuori dal form, potresti anche non utilizzare il form! :-)
Ho fatto 1 esempio veloce per farti capire. Poi fallo carino da mostrare

Potresti gestire la cosa più semplicemente.
Restituendo una stringa in HTML oppure un JSON con un record con la stringa in HTML.

Vedi te come ti è più comodo!

Ciao
Clicca per espandere...
Ciao Daniel
Grazie della tua risposta

Ho seguito le tue indicazioni spostando il div messaggi fuori dal form e assegnandogli l'ID.

Credo che alla funzione $.parseJSON(risposta) non arrivi il JSON inviato dal server, o forse questo JSON ha caratteristiche non compatibili con la funzione non so.
Vorrei usare questa tecnica dello scambio dati in JSON per apprendimento personale e utilizzarla sucessivamente per Form più complessi.

Ti volevo informare che per il back sto usando javascript lato server, eseguito appunto in Node.js.

In sostanza accade questo:
l'utente compila il form e clicca su submit attivando il metodo "post" sul server.
Il metodo "post" estrae il codice tra le variabili del form, e verifica se esiste sul DATABASE MongoDB.
Se il codice esiste il metodo "termina con l'invio dell'oggetto JSON con il messaggio "codice esistente".

Ma questa risposta non riesco ad intercettarla con jQuery settato all'evento "submit", anche usando il codice da te consigliato, quindi mi sfugge qualcosa.

Quando uso il tuo codice viene eseguita sempre la parte nel catch.

comunque ti posto il jQuery che ho provato prima di risponderti, spero tu possa darmi qualche dritta in più.

JavaScript: 
$(() => {
            const $form = $('#inserimentoContenitore');
            $form.on("submit", (e) => {
                try {
                    var obj = $.parseJSON(risposta);
                    var str = '';
                    $.each(obj, function(i, val) {
                        str += val;
                    });
                    $('#messaggi').html(str);
                    e.preventDefault();
                } catch (error) {
                    $('#messaggi').html('Errore interno al server!!!');
                    e.preventDefault();
                }
            });
        });

Grazie mille e saluti
 
daniel_tex

daniel_tex

Utente Attivo
63
13
Ciao,
avevo capito che utilizzi javascript e NODE.JS.

NODE.JS lo conosco poco.... conosco molto di più NGINX/APACHE e PHP.

comunque... se hai il catch significa che non hai un json. O errori di codice. Non so un warning o altro...

Puoi vedere in diversi modi l'errore:

JavaScript: 
catch (error) {
                    //$('#messaggi').html('Errore interno al server!!!');
                    //e.preventDefault();
                    alert(error);
                }

O

JavaScript: 
catch (error) {
                    //$('#messaggi').html('Errore interno al server!!!');
                    //e.preventDefault();
                    alert(risposta);
                }

O

JavaScript: 
catch (error) {
                    $('#messaggi').html(error);
                    //e.preventDefault();
                }

O

JavaScript: 
catch (error) {
                    $('#messaggi').html(risposta);
                    //e.preventDefault();
                }

Così a video vedi cosa restituisce.
Se vuoi vedere cosa restituisce il server imposti risposta, se vuoi vedere il catch imposti error. Poi se lo vuoi vedere con un alert o nella pagina web o in console cambia poco.

Oppure fare un debug del codice che scrivi lato server e vedi se ci sono errori.

Apri strumenti per sviluppatori in chrome o firefox... ti può aiutare!

Ciao
Post unito automaticamente:

Puoi controllare se il json è giusto qui: https://jsonformatter.curiousconcept.com/

comunque un json deve avere una struttura del genere:

JSON: 
[
{"pippo": {
                 "via": "Roma",
                 "civico": 33
                }
  "pluto": {
                "via": "Roma",
                 "civico": 34
               }
  }
]

Non so come funge in node però per php io devo decodificare l'array che mi vado a costruire.

Mi costruisco l'array, come voglio io o in base a cosa devi fare, alle direttive di un WS, poi faccio json_decode, controllando se la decodifica è andata a buon fine.

Se è tutto ok faccio un echo della variabile che contiene il json.

Spero di essere stato chiaro!

Ciao :-)
 
Ultima modifica:
G

Giulio95

Nuovo Utente
25
3
Salve, avevo un'attimo abbandonato questo problema, provero' ad immagazzinare l'oggetto in un array prima di inviarlo, e piazzero' dei catch per controllare.

A risentirci =)
 
G

Giulio95

Nuovo Utente
25
3
Comunque penso di aver risolto, il problema non e' nel oggetto inviato dal server, ma era la chiamata ajax.
Codice: 
$(() => {
            const $form = $('#inserimentoContenitore');
            $form.on("submit", (e) => {
                e.preventDefault();
                const results = (response) => {
                    $('#messaggi').html(response.msg);
                }

                const data = {
                    codice: $("#codice").val(),
                    descrizione: $("#descrizione").val(),
                    lato1: $("#lato1").val(),
                    lato2: $("#lato2").val(),
                    altezza: $("#altezza").val(),
                    tara: $("#tara").val(),
                    portata: $("#portata").val(),
                    impilabilita: $("#impilabilita").val()
                };

                const settings = {
                    url: "/",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    processData: false,
                    success: results
                };

                $.ajax(settings);

            });
        });

Nel primo tentativo avevo sbagliato addirittura l'url da passare ad ajax.
Inoltre ad ajax andava aggiunta la proprieta' "data", per permettere al server di prendere i dati da controllare.

Il codice postato non e' ottimale, manca della gestione errori come minimo.
Lato server uguale lo devo rivedere ed efficientare, la mia inesperienza mi costa di dover rivedere questi lavori.
Tuttavia il codice funziona.

Grazie a tutti per le risposte =)
 
daniel_tex

daniel_tex

Utente Attivo
63
13
Sono contento che hai risolto.
Comunque quando il server ti restituisce un json alla funzione gli passi il parametro response. Response è un esempio puoi anche scrivere pluto non cambia nulla.

Potresti fare per esempio response.chiave e acquisisci il valore della chiave. Se sai che hai 2 chiavi puoi evitare di ciclare. Il controllo degli errori sempre ?

Prego ciao ??
 
Devi accedere o registrarti per rispondere qui.

Entra

Hai dimenticato la password?
oppure Accedi utilizzando
Discord Ufficiale Entra ora!