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
[Javascript] Inviare i campi di un form col metodo post
- Creatore Discussione francesco1976
- Data di inizio
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()
Ecco un semplice esempio con un alert che puoi togliere.
Inviato dal mio iPhone utilizzando Tapatalk
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);
});
});Inviato dal mio iPhone utilizzando Tapatalk
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
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
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>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.
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.
..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>
