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

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
45
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.mrw.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
45
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
82
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
45
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
82
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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [Javascript] aiuto non riesco a inviare in get dal server web locale su altervista con httpRequest Javascript 0
F E' possibile inviare un comando DOS con javascript o altro linguaggio?? Javascript 1
P inviare email con contenuto javascript PHP 5
D_evil1991 inviare variabili da php al javascript PHP 0
B Inviare dati ad una pagina.aspx con Javascript Javascript 1
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
L [Javascript] input variabili di scrittura con canvas Javascript 2

Discussioni simili