Prova Ajax con file semplice php

**Alfoxx** · 21-11-2016, 12:20

Ciao a tutti ragazzisto provando a far dialogare documenti html con javascript e file .php posti nella stessa cartellain particolare:il file "form_prova_ajax.html"

codice:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script src="../css/lib/jquery-latest.js"></script>
<script src="../css/lib/jquery.effects.core.js"></script>


 <script type="text/javascript">
    $(document).ready(function() {


    $("#input_form").submit(function(){ //quando avviene evento submit fai questa funzione
         var nome = $("#nome").attr('value');//preleva l'attributo value cioè quello che digita l'utente
         var cognome = $("#cognome").attr('value');
         $.post("ricavo_dati_da_form_ajax.php",  //invio richiesta a questo file.php
                 {nome:nome, cognome:cognome}, //passandoci questi dati prelevati poco prima
                        
/*questa funzione ci dice cosa vogliamo fare con la risposta che
ci ha inviato il server e che sarà contenuta in data*/         
                         function(data){
                              $("div#result").html(data);  //inserimeno nel div cpn id result
                                        });
/*utilizziamo i form, dobbiamo sempre ricordare di
interrompere l’esecuzione del submit con return false*/         
                    return false;
            });//chiudo il metodo $.post


        
    });//chiudo parentesi di script javascript
</script>


</head>
<body>


<form id="input_form" method="POST" action="ricavo_dati_da_form_ajax.php">
    Inserisci il nome:<br>
    <input type="text" name="nome" id="nome"><br>
    Inserisci il cognome:<br>
    <input type="text" name="cognome" id="cognome"/><br><br>
    <input type="submit" value="invia">
</form>
 
<div id="result"></div>   
<!-- il punto in cui verranno inseriti i risultati dell’elaborazione
 del server -->


</body>
</html>

con questo file .php "ricavo_dati_da_form_ajax.php"

codice:

<?php


$nome=$_POST["nome"];
$cognome=$_POST["cognome"];




echo "Hai inserito i seguenti dati: Nome-><strong>$nome</strong>";
echo"Cognome-><strong>$cognome</strong>"; 
echo "Hai eseguito una chiamata ascinrona!";
?>

Il problema è che sembrano non comunicare, perchè appena cerco di eseguire il tutto (compilare i due campi e mostrare la scritta subito sotto con i due valori digitati dall'utente) mi dice che le due variabili nome e cognome non sono valorizzate.cosa devo fare?

**Alhazred** · 21-11-2016, 14:04

La parte di PHP è giusta.
Sbagli l'invio dei dati con AJAX, quindi hai problemi con Javascript, sposto.

**Alfoxx** · 22-11-2016, 16:50

Ciao Alhazred
ma quindi quando bisogna fare dei collegamenti tramite i metodi ajax, il codice php deve essere modificato in qualche modo per adattarlo alla chiamata?
Mi spiego meglio: il codice php in che modo viene influenzato dalla chiamata ajax?

All'inizio per prelevare i dati, si ragiona come quando si vuole memorizzare i campi di input, e cioè si salvano le info tramite $_POST o $_GET, e con questi si svolge il programmino php.

Ma se il file php deve prelevare dei dati (quindi l'inizio è sempre come nel caso precedente), ma poi li deve fornire al file html che ha la chiamata ajax, i dati nel file .php come si devono presentare? in una maniera particolare?

**ciro78** · 22-11-2016, 17:08

ciao,
verifica di inviare i dati. potrebbe essere che la chiamata post non avviene correttamente.

**Alfoxx** · 22-11-2016, 17:22

Originariamente inviata da ciro78

ciao,
verifica di inviare i dati. potrebbe essere che la chiamata post non avviene correttamente.

a quale chiamata ti riferisci? al metodo $.post?
se si, allora immagino che non avviene perfettamente, visto che nome e cognome non risultano definite

**cavicchiandrea** · 22-11-2016, 18:14

Cambierei attr con val() toglierei la action dal form userei on per il submit cambierei le variabili di invio poi monitorizza la chiama dalla console del browser

**Alfoxx** · 23-11-2016, 12:51

Originariamente inviata da cavicchiandrea

Cambierei attr con val() toglierei la action dal form userei on per il submit cambierei le variabili di invio poi monitorizza la chiama dalla console del browser

Grazie per la risposta, ma non funziona,e nella consolle del browser non viene riportato nulla.
Ho fatto qualche sbaglio ulteriore nelle modifiche?

codice:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script src="../css/lib/jquery-latest.js"></script>
<script src="../css/lib/jquery.effects.core.js"></script>


 <script type="text/javascript">
    $(document).ready(function() {


     
        
        $("#input_form :submit[value=invia]").on('click',function(){
        
       
         var nome = $("#nome").val('value');//preleva l'attributo value cioè quello che digita l'utente
         var cognome = $("#cognome").val('value');
        
        
         $.post("ricavo_dati_da_form_ajax.php",  //invio richiesta a questo file.php
                 {nome:nome, cognome:cognome}, //passandoci questi dati prelevati poco prima
                        

                         function(data){
                     
                             console.log(data);
                              $("div#result").html(data);  //inserimeno nel div cpn id result
                                        });

                    return false;
            });//chiudo il metodo $.post


        
    });//chiudo parentesi di script javascript
</script>


</head>
<body>


<form id="input_form" method="POST">
    Inserisci il nome:<br>
    <input type="text" name="nome" id="nome"><br>
    Inserisci il cognome:<br>
    <input type="text" name="cognome" id="cognome"/><br><br>
    <input type="submit" value="invia">
</form>
 
<div id="result"></div>   
<!-- il punto in cui verranno inseriti i risultati dell’elaborazione
 del server -->


</body>
</html>

tra le cose che mi hai detto mi lascia in dubbio:

-quella di togliere l'action. La posso togliere proprio perchè tramite il metodo $.post mi riferisco ad un file preciso?

-quella di cambiare le variabili : in che modo?

**cavicchiandrea** · 23-11-2016, 13:09

codice:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script src="../css/lib/jquery-latest.js"></script>
<script src="../css/lib/jquery.effects.core.js"></script>


 <script type="text/javascript">
    $(document).ready(function() {
    $("#input_form").submit(function(event){ //quando avviene evento submit fai questa funzione
event.preventDefault();//blocco la propagazione del l'evento
         var name = $("#nome").val();//preleva l'attributo value cioè quello che digita l'utente
         var surname = $("#cognome").val();
         $.post("ricavo_dati_da_form_ajax.php",  //invio richiesta a questo file.php
                 {nome:name, cognome:surname}, //passandoci questi dati prelevati poco prima
                        
/*questa funzione ci dice cosa vogliamo fare con la risposta che
ci ha inviato il server e che sarà contenuta in data*/         
                         function(data){
                              $("div#result").html(data);  //inserimeno nel div cpn id result
                                        });
/*utilizziamo i form, dobbiamo sempre ricordare di
interrompere l’esecuzione del submit con return false*/         
                    return false;
            });//chiudo il metodo $.post


        
    });//chiudo parentesi di script javascript
</script>


</head>
<body>


<form id="input_form" method="POST" action="/">
    Inserisci il nome:<br>
    <input type="text" name="nome" id="nome"><br>
    Inserisci il cognome:<br>
    <input type="text" name="cognome" id="cognome"/><br><br>
    <input type="submit" value="invia">
</form>
 
<div id="result"></div>   
<!-- il punto in cui verranno inseriti i risultati dell’elaborazione
 del server -->


</body>
</html>

usa la console del browser (non console.log()) così vedi sia la chiamata che la risposta, la guida jquery http://api.jquery.com/jQuery.post/ l'hai letta? (non sembrerebbe)

**Alfoxx** · 24-11-2016, 20:42

Grazie mille per il tuo intervento: funziona.

no, non l'ho letto il monitorare dalla guida jquery perchè non l'ho trovato.
Se però ti riferisci (io uso Iron come Browser) a Ispeziona elemento - Network selezionando ALL , allora riesco a vedere che viene richiamato il file .php, dopo aver premuto il bottone invia.

Per il fatto del togliere l'action. La posso togliere proprio perchè tramite il metodo $.post mi riferisco ad un file preciso?

Altra cosa: quindi potrei anche fare tramite questo programma .php (richiamato dal metodo $.Ajax) un salvataggio dei dati nel db?
oppure un richiamo di dati nel db?

**cavicchiandrea** · 25-11-2016, 01:39

Originariamente inviata da Alfoxx

Grazie mille per il tuo intervento: funziona.

no, non l'ho letto il monitorare dalla guida jquery perchè non l'ho trovato.

sono due cose separate, ho sbagliato a mettere la virgola invece del punto. Monitorare le chiamate Ajax permette di trovare errori ed è sempre consigliato. Leggere la guida jQuery ti permette di capire logica e sintassi ed evita domande banali.

Se però ti riferisci (io uso Iron come Browser) a Ispeziona elemento - Network selezionando ALL , allora riesco a vedere che viene richiamato il file .php, dopo aver premuto il bottone invia.

Ok, ma nello sviluppo meglio usare un browser più popolare (Firefox/chrome)

Per il fatto del togliere l'action. La posso togliere proprio perchè tramite il metodo $.post mi riferisco ad un file preciso?

Esatto, inoltre usando jQuery per processare il form se un utente a js disattivato non manda in errore il browser

Altra cosa: quindi potrei anche fare tramite questo programma .php (richiamato dal metodo $.Ajax) un salvataggio dei dati nel db?
oppure un richiamo di dati nel db?

Si, si

Discussione: Prova Ajax con file semplice php

Strumenti discussione

Ricerca discussione

Visualizza

Prova Ajax con file semplice php

Permessi di invio