Inviare dati del form con AJAX

**Wolverine94** · 24-05-2016, 18:48

Salve a tutti,

ho creato un form con un campo text e un pulsante submit. Attraverso AJAX voglio inviare il valore contenuto nella nel campo text al server php (quando l'utente fa click). Una volta che php lo ha ricevuto lo elabora e lo invia al browser.

Questo è il codice javascript

codice:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title></title>
</head>
<body>

  <script>
     
     function attiva()
     {
     var http = new XMLHttpRequest();
     http.onreadystatechange = function()
     {
         if(http.readyState == 4 && httpRequest.status == 200)
         {
             document.write(http.responseText);
         }
     }
        http.open("GET", "operazione.php", true);
        http.send(null);
     }
  </script>
  
  <form name = "modulo">
  Digita il tuo nome: <input type = "text" name = "nome" id = "n"> <br>
  <input type = "submit" name = "pulsante" onclick = "attiva">
  </form>
  
</body>
</html>

Questo è la pagina operazione.php

codice:

<? 
$nome = $_GET["nome"];
echo "Ciao" . $nome;
?>

Quando premo il pulsante non succede nulla. Qualcuno gentilmente può aiutarmi ? Grazie.

**vic53** · 24-05-2016, 20:22

Originariamente inviata da Wolverine94

Salve a tutti,

ho creato un form con un campo text e un pulsante submit. Attraverso AJAX voglio inviare il valore contenuto nella nel campo text al server php (quando l'utente fa click). Una volta che php lo ha ricevuto lo elabora e lo invia al browser.

Questo è il codice javascript

codice:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title></title>
</head>
<body>

  <script>
     
     function attiva()
     {
     var http = new XMLHttpRequest();
     http.onreadystatechange = function()
     {
         if(http.readyState == 4 && httpRequest.status == 200)
         {
             document.write(http.responseText);
         }
     }
        http.open("GET", "operazione.php", true);
        http.send(null);
     }
  </script>
  
  <form name = "modulo">
  Digita il tuo nome: <input type = "text" name = "nome" id = "n"> <br>
  <input type = "submit" name = "pulsante" onclick = "attiva">
  </form>
  
</body>
</html>

Questo è la pagina operazione.php

codice:

<? 
$nome = $_GET["nome"];
echo "Ciao" . $nome;
?>

Quando premo il pulsante non succede nulla. Qualcuno gentilmente può aiutarmi ? Grazie.

ciao
intanto il bottone non deve essere submit ma "button"..
poi la chiamata allo script va fatta con le parentesi
...onclick="Attiva()"... e il botton deve avere un value tipo value="INVIA" per ora correggi queste poi riesaminiamo il codice...

**pietro09** · 24-05-2016, 20:54

il codice lo puoi chiamare così:

<input type = "submit" name = "pulsante" onclick = "attiva(); return false;" />

mentre il codice l'ho sistemato così:

codice:

function attiva()
{
    var http = new XMLHttpRequest();

    http.open("GET", "a.aspx?ajax_comando=1" + "&t=" + new Date().getTime(), true);
    http.send(null);

    http.onreadystatechange = function ()
    {
        if (http.readyState == 4 && http.status == 200)
        {
            document.getElementById("div1").innerHTML = http.responseText;
        }
    }

}

ma ti sconsiglio di usarlo

**vic53** · 24-05-2016, 21:29

Originariamente inviata da pietro09

il codice lo puoi chiamare così:

<input type = "submit" name = "pulsante" onclick = "attiva(); return false;" />

mentre il codice l'ho sistemato così:

codice:

function attiva()
{
    var http = new XMLHttpRequest();

    http.open("GET", "a.aspx?ajax_comando=1" + "&t=" + new Date().getTime(), true);
    http.send(null);

    http.onreadystatechange = function ()
    {
        if (http.readyState == 4 && http.status == 200)
        {
            document.getElementById("div1").innerHTML = http.responseText;
        }
    }

}

ma ti sconsiglio di usarlo

Scusami se ti contraddico.... ma perchè vuoi chiamare file aspx? quando ha chiesto di fare chiamate a PHP? e poi il type="button" funziona perfettamente per non inviare form... e quindi non serve ficcarci dietro il "return false;" o no? Serve a fare chiamate onclick di tipo javascript locali....(sul client...)..
E' tutto per ora e vediamo come scriverà il notro programmatore il suo codice ora.
guarda la discussione http://forum.html.it/forum/showthrea...readid=2939036
su ASP per la chiamata Ajax...

ciao

**fermat** · 24-05-2016, 21:34

guarda che non cambia nulla fare chiamate ad aspx o a php o java.
se usi ajax, non ti interessa che tipo di pagine interroghi, puoi richiamare anche un file txt.
l'importante è che il file remoto rimando i dati con un output corretto.

per quanto riguarda, il button anche io in genere lo preferisco al submit per questi caso.
usando l'evento onclick mi trovo meglio.

**vic53** · 24-05-2016, 21:58

Originariamente inviata da fermat

guarda che non cambia nulla fare chiamate ad aspx o a php o java.
se usi ajax, non ti interessa che tipo di pagine interroghi, puoi richiamare anche un file txt.
l'importante è che il file remoto rimando i dati con un output corretto.

per quanto riguarda, il button anche io in genere lo preferisco al submit per questi caso.
usando l'evento onclick mi trovo meglio.

ok quindi mi dai ragione...
per la chiamata ad ajax io uso questo spezzone di codice che serve a verificare se chiami ActiveX o altro...
ti riporto uno spezzone del mio codice in un programma intranet...

codice:

function RegistraProfessione(txt) {
 var datiform="professione="+escape(txt);
 datiform = datiform + "&finecampi=1";
 if (window.XMLHttpRequest) {
        update_record = new XMLHttpRequest();
        update_record.onreadystatechange = ElaboraRisposta;
        update_record.open("GET","InsProfessione.asp?"+datiform, true);
        update_record.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        update_record= new ActiveXObject("Microsoft.XMLHTTP");
        if (update_record) {
            update_record.onreadystatechange = ElaboraRisposta;
            update_record.open("GET","InsProfessione.asp?"+datiform, true);
            update_record.send();
        }
    }
var x=document.getElementById("professione");
var option=document.createElement("option");
option.text=txt;
try
  {
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {
  x.add(option,null);
  }    
}
...

Questo spezzone di codice chiama Ajax in due casi diversi...ma sempre
lo stesso file ASP sul server e mentre inserisce il record aggiunge un item
alla select "professione"...

**fermat** · 24-05-2016, 22:29

uhm ragione su che?
io non ho parlato di activex.
aspx è una cosa ben diversa da activex.
aspx denota le pagine scritte in .NET Framework (VB.NET o C#).
i controlli activex sono tutt'altra cosa.

**vic53** · 24-05-2016, 22:53

Originariamente inviata da fermat

uhm ragione su che?
io non ho parlato di activex.
aspx è una cosa ben diversa da activex.
aspx denota le pagine scritte in .NET Framework (VB.NET o C#).
i controlli activex sono tutt'altra cosa.

Scusa ma mi stai faintendendo.... o cerchi di far apparire solo quello che dici tu...
leggi tra le righe nello spezzone di codice postato e pensa...
Ci sono browser vecchi e nuovi, pc vecchi e nuovi ... e il codice deve essere fatto per tutti...
inoltre sono certificato Microsoft e ho svolto per piu di 30 anni il sistemista e administrator A.D. Microsoft in uno delle piu grandi centri di elaborazione dati in Italia...)
ciao

**pietro09** · 25-05-2016, 07:40

Allora, rispondo un po' in ritardo.
Il codice l'ho collaudato con visual studio, in una pagina aspx, ininfluente in questo contesto, perchè stiamo discutendo di codice client.

Secondo, è ininfluente come si chiama il codice: ci sono tanti modi. Io ho usato quello proposto dall'autore del post.

codice:

<a href="#" onclick="prova();return false;">test</a>
<br /><br />
<a href="javascript:prova();">test</a>
<br /><br />
<input id="Button1" type="button" value="button" onclick="prova();" />
<br /><br />
<input id="Submit1" type="submit" value="submit" onclick="prova();return false;" />
<br /><br />
<button onclick="prova();return false;">Test</button>
<br /><br />
<p onclick="prova();" style="cursor:pointer;">prova</p>

Il codice originale non funzionava (credo) per quelle parti che ho segnato in rosso e per questo:
if(http.readyState == 4 && httpRequest.status == 200)
sostituito con
if (http.readyState == 4 && http.status == 200)

**vic53** · 25-05-2016, 08:34

Originariamente inviata da pietro09

Allora, rispondo un po' in ritardo.
Il codice l'ho collaudato con visual studio, in una pagina aspx, ininfluente in questo contesto, perchè stiamo discutendo di codice client.

Secondo, è ininfluente come si chiama il codice: ci sono tanti modi. Io ho usato quello proposto dall'autore del post.

codice:

<a href="#" onclick="prova();return false;">test</a>
<br /><br />
<a href="javascript:prova();">test</a>
<br /><br />
<input id="Button1" type="button" value="button" onclick="prova();" />
<br /><br />
<input id="Submit1" type="submit" value="submit" onclick="prova();return false;" />
<br /><br />
<button onclick="prova();return false;">Test</button>
<br /><br />
<p onclick="prova();" style="cursor:pointer;">prova</p>

Il codice originale non funzionava (credo) per quelle parti che ho segnato in rosso e per questo:
if(http.readyState == 4 && httpRequest.status == 200)
sostituito con
if (http.readyState == 4 && http.status == 200)

Carissimo Pietro, io non sto dicendo nulla sul fatto di chiamare Aspx o PHP o ASP... dato che è codice Client... ma nei client ci possono esere versioni vecchie e nuove di browser e questi possono piu o meno chiamare AJAX come fai tu...

codice:

   var http = new XMLHttpRequest();
     http.onreadystatechange = function()
     {
...

oppure essere piu generici e usare questo

codice:

 if (window.XMLHttpRequest) {
        update_record = new XMLHttpRequest();
        update_record.onreadystatechange = ElaboraRisposta;
        update_record.open("GET","InsProfessione.asp?"+datiform, true);
        update_record.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        update_record= new ActiveXObject("Microsoft.XMLHTTP");
        if (update_record) {
            update_record.onreadystatechange = ElaboraRisposta;
            update_record.open("GET","InsProfessione.asp?"+datiform, true);
            update_record.send();
        }
    }
...

che come ti dicevo prima di leggere nel post... cerca di utilizzare quello
che trova sul client per chiamare AJAX e non mi riferivo a chiamate aspx, PHP o ASP; anche se mischiare
PHP e ASPX hanno diversita nel trattare le sessioni ma si puo' fare tranquillamente...
con questo non voglio farti nessuna obiezione sul modo di lavorare ognuno scrive il
codice come si sente di scrivere basta che funzioni e che sia leggibile inc caso di
manutenzione...
con questo ti saluto

Discussione: Inviare dati del form con AJAX

Strumenti discussione

Ricerca discussione

Visualizza

Inviare dati del form con AJAX

Permessi di invio