[Javascript] Inviare i campi di un form col metodo post

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
44
Ciao a tutti e scusate il disturbo. Sto letteralmente impazzendo ma in giro sul web non trovo risposta al mio quesito. In pratica, dato un form contenente dei campi di input vorrei raccogliere i dati inseriti e inviarli a uno script php tramite Ajax. Il punto della mia domanda sta nel fatto che se utilizzo l'attributo action del form la risposta, dopo il submit, mi sovrascrive la pagina corrente che ha effettuato la chiamata Ajax ed io non vorrei che ciò accadesse. Vorrei invece gestire a mio piacimento la risposta del server. Se invio i campi del form con il metodo get nella chiamata Ajax, ho imparato che bisogna comporre dinamicamente una stringa (es. ?nome=Giorgio&cognome=Rossi) ed accordarla al nome dello script php. Col metodo GET tutto funziona bene. Ma se decidessi di usare nella chiamata Ajax il metodo POST, come potrei inviare i dati raccolti dinamicamente dal form? Non so se la situazione che sto rappresentando è realistica, ma il mio obbiettivo è quello di imparare per passione. Grazie e ciao a tutti
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Mi sto cimentando da non molto anche io e con successo sono riuscito a fare esattamente quello che chiedi.. Non è affatto una cosa complessa. Te lo spiego teoricamente essendo da cell, magari domani quando sono in ufficio ti posto un esempio. Mettiamo che sai ( tramite js o jquery ) raccogliere i singoli dati in variabili ( puoi usare anche serialize() che a quanto pare li raccoglie tutti in un colpo ) ma nel mio caso ho preferito raccoglierli in singole variabili. Poi ci sono due modi ( che ho sperimentato ) per ottenere questo obiettivo..
1) è spiegato benissimo qui.. https://www.mrwebmaster.it/ajax/inviare-form-metodo-post-ajax-jquery_7648.html
2) tramite post()
Codice:
$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});
Ecco un semplice esempio con un alert che puoi togliere.



Inviato dal mio iPhone utilizzando Tapatalk
 

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
44
Grazie per la risposta. Studierò gli esempi. Forse ho dimenticato di specificarlo nel mio post ma io volevo tentare di fare l'operazione usando il javascript puro non jquery. Per adesso studio la materia per passione... e non vorrei usare un framework come jquery che per quanto bello e potente è scritto comunque da altri. Se puoi aiutarmi te ne sono grato. Ciao
 

linoma

Utente Attivo
1 Mar 2017
78
4
8
Per quel che riguarda ajax ti consiglio di usare un layer di codice coem jquery ed altro visto il numero di dispositivi in giro.
Puoi comunque usare l'evento onsubmit del form per fare la chiamata ajax come ti indico

Codice:
<html>
   <head>
       <script>
           function on_submit(form){
               //il tuo codice ajax
               
               return false;//Importante altrimenti fa la chiamata ad action
           }
       </script>
   </head>
   <body>
       <form onsubmit='return on_submit(this);'>
       .
       .
       </form>
   </body>
</html>
 

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
44
Ciao Linoma, ho provato a scrivere del codice sulla base delle tue indicazioni, ma non mi funziona proprio.
Mica potresti dare un'occhiata al codice che ti posto? Te ne sarei grato.

window.addEventListener("load", function () {
var invia=document.getElementsByTagName("button")[0];
var scrivi=document.getElementsByTagName("button")[1];
var form=document.forms[0];
invia.onclick=function () {form.submit()};
form.onsubmit=function() {
var req=new XMLHttpRequest();
req.open("GET","../php/manager.php");
req.onreadystatechange=function () {
if(req.readyState==4 && req.status==200) {alert (req.responseText)};
};
req.send();
return false;
};

});

Il form in html è scritto così: <form action="../php/manager.php" method="POST">

In realtà avrei anche trovato il sistema per aggirare l'ostacolo indirizzando la risposta in un frame nascosto di 1px. Mi sembra però una soluzione molto poco elegante.
Grazie ciao.
 

linoma

Utente Attivo
1 Mar 2017
78
4
8
..ho riscritto un po il codice a me funziona ovviamente nn trova la pagina indicata

Codice:
<html>
   <head>
       <script>
           function on_submit(form){
               console.log("lino");
               var req=new XMLHttpRequest();
               req.open("GET","/php/manager.php");
               req.onreadystatechange=function () {
                   if(req.readyState==4 && req.status==200) {
                       alert (req.responseText)
                   };
               };
               req.send();
               return false;//Importante altrimenti fa la chiamata ad action
           }
       </script>
   </head>
   <body>
       <form onsubmit='return on_submit(this);'>
           <input type='submit' />
       </form>
   </body>
</html>