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

F

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
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

otto9due

Utente Attivo
22 Feb 2014
591
25
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
 
F

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
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
 
L

linoma

Utente Attivo
1 Mar 2017
93
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>
 
F

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
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.
 
L

linoma

Utente Attivo
1 Mar 2017
93
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>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M Inviare un file su un server remoto con JavaScript Javascript 0
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
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
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
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
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
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
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
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
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 18
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

Discussioni simili

Alto Basso