javascript Ajax (Facile.. ma non per me)

rob25111

Nuovo Utente
38
0
non sono per niente abile in js e ho da poco incominciato a studiarlo.
sto lavorando ad un progetto di un ecommerce ma ora non riesco a gestire bene questa richiesta AJAX.
Dovrebbe essere molto semplice per chi è abile in js.
Qui il problema.

Lato server ho creato una funzione del tipo:

Codice:
def ajax_request(request):
    ...
    ... #python

    ...
    return jsonresponse( {
    'dato1':dato1,
    'dato2':dato2
    })


lato client invece ( ho scritto probabilmente nodi di codice che non so come risolvere):
Codice:
<script> //javascript


//il form invia nome e cognome della persona che sta concludendo l'ordine e lo salva nel db
$('#post_form').on('submit', function(event){
            event.preventDefault();
            console.log("form submitted!")  // sanity check
            create_post();
        });




      function create_post() {
            console.log("create post is working!") // sanity check
            $.ajax({
                url : "{% url 'checkout_gen' %}", // endpoint
                type : "POST",
                data : { nome : $('#nome').val(),
                cognome : $('#cognome').val(),
                telefono : $('#telefono').val(),
                csrfmiddlewaretoken: "{{ csrf_token }}",
                dataType: "json",


                },

            
                success : function(json) {
                    // qui non so come gestire la risposta del server !!
                    //che funzioni si usano?
                    //il resto è scritto un po' accasaccio
                
                    prova_prosegui();

                },

                // handle a non-successful response
                error : function(xhr,errmsg,err) {
                console.log("error"); // another sanity check
                }
            });
        };
    
    
        function prova_prosegui () {
        .then((result) => { return result.json() });
        .then((data) => {
                 var stripe = Stripe(data.STRIPE_PUBLIC_KEY);

                 stripe.redirectToCheckout({
                   sessionId: data.session_id
                 }).then(function (result) {
                   // If `redirectToCheckout` fails due to a browser or network
                   // error, display the localized error message to your customer
                   // using `result.error.message`.
                 });

}

</script>


Si.. quello che viene passato dal server come risposta è la chiave pubblica e l'id del checkout STRIPE (stripe è un gateway online di pagamento per chi non lo conoscesse) che è stato generato in backend..

è molto facile il problema.. sono io a non aver mai studiato js (rimedierò assolutamente) ma ora voglio solo concludere questo progetto.
Grazie mille in anticipo
 
Ultima modifica:

Mursey

Super Moderatore
Staff Forum
Utente Èlite
8,192
5,632
Qui il problema
JavaScript:
success : function(json) {
     // qui non so come gestire la risposta del server !!
    //che funzioni si usano?
Se tutto è andato bene devi usare il parametro json
E' una stringa e la puoi convertire in oggetto per gestirla meglio.

Esempio:
Una variabile pippo che contiene una stringa
JSON:
{
    "dato1":1,
    "dato2":2
}
Può essere convertita usando var pluto = JSON.parse(pippo)
il risultato è un oggetto che espone delle proprietà
JavaScript:
pluto.dato1
pluto.dato2

Quindi prima cosa che devi fare è vedere se la tua variabile json contiene la stringa che ti aspetti.
Se si, poi la gestisci convertendola in oggetto.
 

daniel_tex

Utente Attivo
63
13
Ciao,
se imposti json come "dataType" puoi evitare di fare il parse del valore restituito dalla funzione. Quindi puoi accedere direttamente al dato.

esempio:

JavaScript:
$('#createEvent').submit(function(event) {

    event.preventDefault();
   
    var valore01 = $('#valore01').val();
    var valore02 = $('#valore02').val();

    /*
    Controlli se i campi sono vuoti, devi anche gestire che tipo di dato ti serve.
    Per esempio se vuoi solo numeri o numeri e lettere.
    */
    if(valore01=='' || valore02==''){
        alert('Valorizzare i campi obligatori');
        return false;
    }
    $.ajax({
        url            : "path_tua_api",
        type        : "POST",
        dataType    : 'json',
        data        : {"valore01": valore01, "valore02": valore02},
        success: function (data) {
            alert(data.dato1+' - '+data.dato2);
        },
        error: function(e) {
            /*Se vuoi loggare l'errore utilizzi il valore "e"*/
            alert('Chiamata fallita, si prega di riprovare...');
        }
    });
});

Ciao
 
Ultima modifica:

daniel_tex

Utente Attivo
63
13
Mi spieghi dove hai difficoltà? Così posso essere più preciso.

Nella funzione "submit" ho scritto "event". Non l'ho scritto a caso...

Puoi utilizzare il parametro per evitare un reload o refresh della pagina.

Per esempio

JavaScript:
event.preventDefault();

Ho fatto la modifica al post precedente... Così ti è più chiaro...

Il "parse" lo puoi utilizzare se utilizzi il "datatype" come "html" e non "json". Nulla vieta di utilizzarlo anche con il json. Hai in più le funzioni che puoi tilizzare con l'oggetto. Questa cosa ti è stata spiegata anche da Mursey.

I controlli che fai jquery eseguirli anche nella logica lato server. Questo perché il codice lato client può essere modificato facendo semplicemente ispezziona da chrome o altri browser. Lato server non possono essere modificati a meno che non viene bucato, ma questo è un discorso diverso! Se ci sono errori lato server restituisci l'errore sotto forma di json. Ricorda sempre se imposti json devi restituire json.
Con json puoi anche restituire valori booleani per eventuali if, stringhe per messaggi, ecc.

Ciao ??
 
Ultima modifica:

rob25111

Nuovo Utente
38
0
Mi spieghi dove hai difficoltà? Così posso essere più preciso.

Nella funzione "submit" ho scritto "event". Non l'ho scritto a caso...

Puoi utilizzare il parametro per evitare un reload o refresh della pagina.

Per esempio

JavaScript:
event.preventDefault();

Ho fatto la modifica al post precedente... Così ti è più chiaro...

Il "parse" lo puoi utilizzare se utilizzi il "datatype" come "html" e non "json". Nulla vieta di utilizzarlo anche con il json. Hai in più le funzioni che puoi tilizzare con l'oggetto. Questa cosa ti è stata spiegata anche da Mursey.

I controlli che fai jquery eseguirli anche nella logica lato server. Questo perché il codice lato client può essere modificato facendo semplicemente ispezziona da chrome o altri browser. Lato server non possono essere modificati a meno che non viene bucato, ma questo è un discorso diverso! Se ci sono errori lato server restituisci l'errore sotto forma di json. Ricorda sempre se imposti json devi restituire json.
Con json puoi anche restituire valori booleani per eventuali if, stringhe per messaggi, ecc.

Ciao ??
mi è tutto chiaro ora.
Non capisco però la logica che sta dietro.
La sintassi del tipo:
"function (data)"
implica sempre il fatto che in data finisca la risposta del server in JS?
Avviene questo perché javascript ragiona in questo modo o è una sorta di semplificazione da parte di Jquery?

ho visto in rete che a volte anziché utilizzare il $.ajax si utilizza il .then

ci sono delle affinità ?
(credo riguardi il parsing questo vero.. (?) cosa che mi avete accennato )


Problema 2:
scrivo qui senza aprire un altro topic.
Continuando la creazione dell'ecommerce (che ormai spero sia in fine) ho un ultimo problema.
Una volta che la persona completa l'ordine riceve un SMS del tipo:

'ciao {nome}! Puoi ritirare il tuo prodotto in negozio presentando questo QR code (link al QR CODE).'

Ora io quindi genero un url del tipo:
mio-sito.com/ritiro/qr-code

questo puo essere un problema dal punto di vista della sicurezza?
qualcuno potrebbe accedervi al link senza avere il permesso ?
l'unica cosa che ho pensato potrei fare è non indicizzare nei motori di ricerca (ovviamente :D) tutti i percorsi " mio-sito.com/ritiro/* " ma basta questo?
altre idee per rendere il tutto più sicuro ?
 
Ultima modifica:

daniel_tex

Utente Attivo
63
13
Ciao,
ti posto una porzione di codice per spiegarti e farti capire:

JavaScript:
success: function (data) {
    alert(data.dato1+' - '+data.dato2);
},

Il valore "data" è un valore che inserisci tu a tuo piacimento ci puoi anche scrivere "pippo" oppure "oggi_a_pranzo_mangio_i_fusilli_con_il_sugo".

E' un valore che inserisci tu, tuo libero arbitrio. Come anche in:

JavaScript:
error: function(e) {
    /*Se vuoi loggare l'errore utilizzi il valore "e"*/
    alert('Chiamata fallita, si prega di riprovare...');
}

Il valore "e" è a tuo libero arbitrio come sopra! Puoi scriverci quello che vuoi; "a_colazione_ho_mangiato_una_mela_gialla" oppure "errore" oppure "pluto" non importa cosa scrivi. Se scrivi una frase come ho fatto io, chi legge il codice pensa: Ma questo che cavolo fa? Si inseriscono nomi o abbreviazioni che hanno un senso.

"dato1" e "dato2" sono le chiavi del json che restituisci. Ho utilizzato questi valori perché lì ho ripresi dall'esempio di Mursey! Tu puoi utilizzare i nome delle chiavi come meglio credi, chiamare una chiave come vuoi. Stesso principio piegato sopra....
Puoi anche creare degli array all'interno dei json.

La lettura del QRCODE puoi proteggerla tramite autenticazione, nel db associ il qr all'utente e all'acquisto.

Non indicizzarlo non implica non trovabile.

Ci sono 3 tipi di WEB:
1. l'indicizzato o white web, è circa il 4% di tutto il web.
2. il beep web o il web sommerso, cioè il NON indicizzato, quì si possono trovare siti di commercio illegale come vendite di credenziali delle persone ecc. Questi dati sono stati reperiti tramite malware ecc
3. dark web il web più losco, dove girano persone poco raccomandabili, commercio di armi, pedofilia ecc ecc.

Non mi dilungo... sarebbe da scrivere un libro!

Spero che sono stato esauriente.

Ciao ?
 
Ultima modifica:
  • Mi piace
Reazioni: rob25111

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!