Interazione tra i form html ajax e php

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
Buongiorno ragazzi. Come ho già scritto qualche giorno fa, sono un neofita che con molta fatica sta cercando di comprendere l'architettura di base dei siti web responsivi. Purtroppo nella mia testa ha tanta confusione, per cui sto cercando di mettere in piedi semplici esercizi (che per molti di voi saranno ridicoli...) per cercare di capire le basi delle interazioni client-server. Purtroppo in giro sul web ci sono tanti esempi per me, che tra l'altro non consco minimamante SQL, troppo complicati.
Vi posto il codice e vi spiego quello che sto cercando di fare.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>
input, label{ display:block;}

</style>
</head>

<body>
<button id="button">bottone</button>
<img src="gufi.png" />
<form action="elaborazione.php" method="GET">
<fieldset>
<legend>I miei dati personali</legend>
<label for="nome">Inserisci il tuo nome</label>
<input type="text" id="nome" name="nome" />
<label for="cognome">Inserisci il tuo cognome</label>
<input type="text" id="cognome" name="cognome" />
<input type="submit" value="Invia al server" />
</fieldset>
</form>
<script>
function f() {
var request=new XMLHttpRequest();
request.open("GET", "elaborazione.php");
request.send(null);
request.onreadystatechange=function () {
if (request.status==200 && request.readyState==4) {
var p=document.createElement("p")
p.innerHTML=request.responseText;
document.body.appendChild(p);
}
}
}

button.onclick=f;

</script>
</body>
</html>

In pratica voglio inserire semplicemente un nome e cognome in un form. Inviare i relativi dati ad uno script php e poi recuperarli con una chiamata Ajax (dal tag button) che mi agganci il testo ottenuto alla pagina da cui parte la chiamata Ajax.
Il problema sta nel fatto che inviando i dati dal form dopo il submit dello stesso mi viene sovrascritta la pagina di base.
Vi chiedo innanzitutto, è possibile un esercizio del genere? Oppure sono fuori strada?
Che consigli mi date a riguardo? Accetto qualsiasi spiegazione!!
Grazie a tutti e scusate la lunghezza del post.
CIAO
 
Ultima modifica:

livellacri

Utente Attivo
18 Ago 2016
108
13
18
Ciao Francesco
Non puoi inviare i dati con un form submit e dopo recuperarli con una richiesta ajax.
Devi inviare i dati con ajax, e in questo modo ricevi la risposta.
Quindi uno dei due button non ti serve.

All'interno della funzione f devi aggiungere queste righe:
Codice:
event.preventDefault()
var nome = document.getElementById('nome').value;
var cognome = document.getElementById('cognome').value;
La prima riga serve per impedire che il form venga inviato normalmente (quindi senza ajax).
Le altre due righe salvano i dati inseriti nel form nelle variabili nome e cognome.

Poi devi modificare anche questa riga, in modo da inviare insieme alla richiesta ajax anche il nome e il cognome:
da così:
Codice:
request.open("GET", "elaborazione.php");
a così:
Codice:
request.open("GET", "elaborazione.php?nome="+nome+"&cognome="+cognome);

Pagina completa funzionante:
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>
input, label{ display:block;}

</style>
</head>

<body>
<img src="gufi.png" />
<form action="elaborazione.php" method="GET">
<fieldset>
<legend>I miei dati personali</legend>
<label for="nome">Inserisci il tuo nome</label>
<input type="text" id="nome" name="nome" />
<label for="cognome">Inserisci il tuo cognome</label>
<input type="text" id="cognome" name="cognome" />
<button id="button">Invia al server</button>
</fieldset>
</form>
<script>
function f() {
event.preventDefault()
var nome = document.getElementById('nome').value;
var cognome = document.getElementById('cognome').value;
var request=new XMLHttpRequest();
request.open("GET", "elaborazione.php?nome="+nome+"&cognome="+cognome);
request.send(null);
request.onreadystatechange=function () {
if (request.status==200 && request.readyState==4) {
var p=document.createElement("p");
//var type=response.getResponseHeader("Content-Type");
//if(type=="text/plain") {
p.innerHTML=request.responseText;
//var form=document.forms[0];
//form.style.display="none";
document.body.appendChild(p);
//}
}
}
}
button.onclick=f;
</script>
</body>
</html>
 
  • Like
Reactions: francesco1976

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
Grazie. Sei stato gentilissimo. Appena trovo qualche minuto studierò con attenzione il codice. Grazie di nuovo
 

francesco1976

Nuovo Utente
10 Mag 2017
37
0
6
48
Grazie. Sei stato gentilissimo. Appena trovo qualche minuto studierò con attenzione il codice. Grazie di nuovo[/QUOTE]
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Interazione tra un più campi di un form con un solo campo di database - query mysql PHP 2
S [PHP] Interazione tra due finestre. Come fare? PHP 4
Albertoesse Problemi Interazione tra PHP\JS\MYSQL PHP 3
Athene Interazione tra il foreach e una tabella html PHP 12
S bacheca interazione tra utenti stile facebook ... PHP 49
S Interazione solo tra utenti stile facebook PHP 44
V Interazione tra PHP e MS Access, aggiungere WHERE condition PHP 2
A PROBLEMA INTERAZIONE PHP E JAVASCRIPT PHP 1
F Facebook ADS ... meglio impression o interazione con post? Social Media Marketing 1
A interazione su campo input dopo l'inserimento della prima lettera jQuery 2
V Interazione excel con pagina web HTML e CSS 1
MrClog interazione con VNC PHP 0
ste80 interazione PHP Access con paginazione PHP 7
L Interazione Javascript con Java Javascript 0
Athene Interazione session_start() e array associativo PHP 5
M interazione database con google maps Javascript 0
X interazione javascript e php (aggirare limite) Javascript 2
emanuelevt interazione programmazione web .exe con laurea breve Discussioni Varie 5
F interazione database template system PHP 1
G Snoopy e Php,tentativo di interazione con sito PHP 1
C [HELP] interazione flash e javascript Flash 0
S Semplice Javascript di interazione con iframe Javascript 1
N interazione php access PHP 0
T Problema interazione flash-html Flash 0
P interazione in html HTML e CSS 2
C Problemi interazione javascript e flash Javascript 0
C Problemi interazione Flash-javascript!!!! Help! Flash 1
E Query differenza tra tabelle MySQL 5
A differenza tra account email e ISP presenti in blacklist Posta Elettronica 0
W Differenza tra orari PHP 3
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
MarcoGrazia Associazioni tra Search Console e Analitycs SEO e Posizionamento 0
M Collegamento tra form html e script php PHP 4
D popolare campi tra th alla select PHP 36
Gabriele Visioli Differenza tra hosting e hosting WordPress Hosting 4
S Differenza tra le funzioni include () e require ()? PHP 1
P Ciclare tra array di oggetti PHP 1
B Incongruenze tra Mac ver e PC ver Photoshop 1
N Problema passaggio variabili tra pagine PHP 4
L estrarre valori max tra più tabelle MySQL 2
MarcoGrazia Dati nulli su join tra più tabelle MySQL 1
S Utilizzo variabili di sessione tra PC e server PHP 0
R Relazione tra tabelle MS Access 5
Tommy03 Query tra 3 tabelle MySQL 2
elpirata [MySQL] Sincronizzare dati tra due tabelle sullo stesso host MySQL 0
R passaggio variabili tra modulo genitore a figlio jQuery 3
P Passagio dati complessi tra una ASP.NET webapi e Angular ASP.NET 1
A [ASP] Confronto tra dati Form e DB Classic ASP 2
G [PHP] Passare dati tra record PHP 4
M [MS Access] Relazione tra maschere MS Access 1

Discussioni simili