Chiamata Ajax con metodo POST

di il
19 risposte

Chiamata Ajax con metodo POST

Buongiorno a tutti,
Ho iniziato da poco a studiare il linguaggio JavaScript, la libreria jquery e la tecnologia Ajax.
Vorrei effettuare una chiamata Ajax. Il linguaggio lato server è php e utilizzo un server Apache. Per una chiamata di tipo get non ho avuto problemi, mentre per la chiamata di tipo post per inviare dati immessi in un form sì.

Questa è la chiamata Ajax di tipo GET:

$(document).ready(function () {

        $("#registrazioneUtente").click(function () {
            inviaControllerTask('registrazione', 'utente', '#contenutiAjax' );
        });
});

function inviaControllerTask(controller1, task1, ajaxdiv) 
{
    $.ajax({
        // definisco il tipo della chiamata
        type: 'GET' ,  
        // specifico la URL della risorsa 
        url: controller1 + '/' + task1,
        // imposto azione per il caso di successo
        success: function (datiRisposta) 
                {
                        alert(datiRisposta);
                        $(ajaxdiv).html(datiRisposta);
                }
    });
}

Mentre questo è il codice per effettturare la chiamata Ajax di tipo POST:

$(document).ready( function(){
    
    $('#submitRegistrazioneUtente').click(function(event){
        event.preventDefault(); 
        inviaDatiRegistrazione('#inserisciUtente','registrazione', 'utente', '#contenutiAjax' );
    });    
});

function inviaDatiRegistrazione(id, controller1, task1, ajaxdiv)
{
    //recupera tutti i valori del form automaticamente
    var dati =  $(id).serialize();
    $.ajax({
        type: 'POST',
        url:  controller1 + '/' + task1,
        data:   dati, 
        success: function()
        {
           alert("Dati clinica inviati per effettuare la registrazione"); 
        },
        error: function()
        {
            alert("Chiamata fallita, si prega di riprovare...");
        }
        
    });
}
Ho incluso il file JavaScript che gestisce il click sul tasto submit nell'head del file html, sia la form che il tasto submit possiedono un id che utilizzo nel file javascript per la selezione.

Quando mando in run, l'url risulta
POST "http://www.miosito.it/index.ph#"
e non quella inserita nella funzione Ajax:
POST "http://www.miosito.it/registrazione/utent"
Inoltre lo script php non trova controller e task. Qualcuno può spiegarmi cosa sto sbagliando gentilmente? Può essere che non sto passando i dati allo script?
Vi ringrazio anticipatamente per l'aiuto.

19 Risposte

  • Re: Chiamata Ajax con metodo POST

    Ciao

    Vista così sembra corretta. C'è un motivo per cui hai messo il event.preventDefault();?
    Comunque, per poterti aiutare maggiormente ci servirebbe anche sapere cosa utilizzi per il server (solo php o utilizzi un framework particolare per l'MVC quali Zend o YiiFramewrok?).

    Hai provato ad andare in debug utilizzando lo strumento per sviluppatori del browser che utilizzi? Basta premere F12, ti si apre una finestra, in genere agganciata al browser nella parte bassa. Nella finestra aperta c'è una sezione di debug dove puoi debuggare il codice javascript. Se per qualche motivo non riesci a trovare le tue funzioni javascript nella finestra scrivi la parola chiave debugger; nel punto che vuoi debuggare (per funzionare devi comunque tenere aperta la finestra degli strumenti per sviluppatori). Il metodo diventerebbe così
    function inviaDatiRegistrazione(id, controller1, task1, ajaxdiv)
    {
        debugger;
        //recupera tutti i valori del form automaticamente
        var dati =  $(id).serialize();
        $.ajax({
            type: 'POST',
            url:  controller1 + '/' + task1,
            data:   dati, 
            success: function()
            {
               alert("Dati clinica inviati per effettuare la registrazione"); 
            },
            error: function()
            {
                alert("Chiamata fallita, si prega di riprovare...");
            }
            
        });
    }
    In questo modo riesci a capire se e cosa passi come parametri alla funzione (noi purtroppo non siamo veggenti e non vediamo che succede ).

    Il mio consiglio, che do sempre anche a mio cognato e che ogni volta mi tocca ripetergli , è di utilizzare sempre tale strumento. La prima cosa che si deve fare appena avviate il browser per testare è premere F12 per vedere cosa succede
  • Re: Chiamata Ajax con metodo POST

    Buongiorno,
    innanzitutto ti ringrazio per aver riposto.
    Sto utilizzando solo codice php lato server senza ricorrere ad alcun framework.
    Ho aggiunto il metodo event.preventDefault() nella chiamata Ajax POST per evitare l'azione di default del pulsante di tipo submit che invia una richiesta sincrona.
    Per il debug sto utilizzando firebug ed è proprio lì che mi sono resa conto che l'url è sbagliata e per questo il codice lato server non trova i valori di controller e task. Infatti l'url dovrebbe essere POST "http://www.miosito.it/registrazione/utent" (e quindi controller= registrazione e task= utente) mentre l'url risulta POST "http://www.miosito.it/index.ph#" (e quindi controller e task non definiti).
    Dove sto sbagliando?
  • Re: Chiamata Ajax con metodo POST

    Figurati, siamo qua per questo
    Il codice, ripeto, sembra corretto. L'unica sarebbe una sessione di debug, in quel modo posso riuscire a capire. Firebug in console ti da qualche errore?
  • Re: Chiamata Ajax con metodo POST

    Questo è ciò che ottengo. Non ci sono errori sintattici, solo l'url è sbagliata.
    [img]
    Immagine.jpg
    Immagine.jpg

    [/img]
  • Re: Chiamata Ajax con metodo POST

    Quindi il problema non è il non passaggio dei dati, ma l'url. se vai in debug i valori dei parametri controller1 e task1 sono inizializzati?
  • Re: Chiamata Ajax con metodo POST

    No. è proprio questo il problema.
  • Re: Chiamata Ajax con metodo POST

    Giuro, non riesco a trovare l'errore -_- anche emulandolo nella console di Chrome risulta corretta, come dovrebbe essere.

    mi fai un test provando a dichiarare una variabile per l'url? praticamente mi trasformi il codice nel seguente modo:
    
    function inviaDatiRegistrazione(id, controller1, task1, ajaxdiv)
    {
        debugger;
        //recupera tutti i valori del form automaticamente
        var dati =  $(id).serialize();
        var url = controller1 + '/' + task1;
        $.ajax({
            type: 'POST',
            url:  url,
            data:   dati, 
            success: function()
            {
               alert("Dati clinica inviati per effettuare la registrazione"); 
            },
            error: function()
            {
                alert("Chiamata fallita, si prega di riprovare...");
            }
            
        });
    }
    
  • Re: Chiamata Ajax con metodo POST

    Fatto ma il risultato è identico.
  • Re: Chiamata Ajax con metodo POST

    Porta pazienza

    mi manderesti/posteresti l'intero codice html? Perché giuro che a vista non trovo l'errore
  • Re: Chiamata Ajax con metodo POST

    Certamente! Eccolo:
    
    <html>
        <head>
    
            <link rel="stylesheet" type="text/css" href="./Css/homePage.css">
            <script type="text/javascript" src="./jScript/jquery-1.12.4.min.js"></script>
    	<script type="text/javascript" src="./jScript/adaptive-image.js"></script>
    	<script type="text/javascript" src="./jScript/eventi_click.js"></script>
            <meta name="viewport" content="width=device-width" initial-scale=1  maximum-scale=1>    
    	<meta charset="UTF-8">
         
        <body>
            <!-- Classe container per l'intera pagina-->
            <div id="wrapper">
    
                <!-- Header della pagina-->
                
                <div class="header" id="header">
                    <img id="logo" src="Immagini/logo.png" alt="logo">
        		<!-- Navigation bar della pagina-->
    			<nav id="navigationBar">
    		<nav id="navigationBar">
    		    <ul class="nav">
            		<li class="nav" id="home">
               		 <a class="nav" href="#">HOME</a>
           			 </li>
        
            		<li class="nav" id="registrazione">
               		 <a class="nav" href="#"> Registrazione</a>
           			 </li>
       		   </ul>
    		</nav>
                                
                     </div>
            
                <!-- Main della pagina-->
            
            
            <div id="contenutiAjax">
                
            </div>
            <!--Footer della pagina-->
                <div id="footer">
                    <span class="copyright">©2016 Copyright </span>
                </div>
            </div>
        </body>
    </html>
    
  • Re: Chiamata Ajax con metodo POST

    Emmm.... non per essere pignolo..... ma non mi hai dato la pagina con il form e le relative funzioni javascript
  • Re: Chiamata Ajax con metodo POST

    Hai ragione!! Perdonami!!
    
    <form class= "formInserisci" name="inserisciUtente" method="post" id="inserisciUtente"> 
                <div class="informazioni"> 
                    <div class="nome">            
                        <label for="nome">Nome</label>
                        <input type="text" name="nome" id="nome" placeholder="Mario" required/>
                        <br>
                    </div>
                    <div class="cognome"> 
                        <input type="text" name="cognome" id="cognome" placeholder="Rossi" required/>
                        <label for="cognome">Cognome</label>
                        <br>
                    </div>
                    <div class="codiceFiscale"> 
                        <input type="text" name="codiceFiscale" id="codiceFiscale" placeholder="MRARSS67S42G438S" required/>
                        <label for="codiceFiscale">Codice Fiscale</label>
                        <br>
                    </div>
                </div>
                <div class ="indirizzo">
                    <div class="via">              
                        <input type="text" name="indirizzo" id="indirizzo" placeholder="Via/C.da Acquaventina" required/>
                        <label for="indirizzo">Indirizzo</label>
                        <br>
                    </div>
                    <div class="numeroCivico">
                        <input type="number" name="numeroCivico" id="numeroCivico" min="0" max="1000" placeholder="3"/>
                        <label for="mumeroCivico">Numero Civico</label>
                        <br>
                    </div>
                    <div class="CAP"> 
                        <input type="text" name="CAP" id="CAP" placeholder="65017" required/>
                        <label for="CAP">CAP</label>
                        <br>
                    </div>
                </div>
                    <!--type=email non supportato da safari-->
                <div class="accesso">
                    <div class="email"> 
                        <input type="email" name="email" id="email" placeholder="mario.rossi@example.it" required>
                        <label for="email">Email</label>
                        <br>
                    </div>
                    <div class="password"> 
                        <input type="password" name="password" id="password" required >
                        <label for="password">Password</label>
                        <br>
                    </div>
                </div>
                <div class="submit" >
                    <input type="submit" value="Invia" id="submitRegistrazioneUtente">
                </div>
            </form> 
    
  • Re: Chiamata Ajax con metodo POST

    Questo è il file javascript
    
    $(document).ready( function(){
        
        $('#submitRegistrazioneUtente').click(function(event){
            event.preventDefault(); 
            inviaDatiRegistrazione('#inserisciUtente','registrazione', 'utente', '#contenutiAjax' );
        });    
    });
    
    function inviaDatiRegistrazione(id, controller1, task1, ajaxdiv)
    {
        
        //recupera tutti i valori del form automaticamente
        var dati =  $(id).serialize();
        $.ajax({
         
            type: 'POST',
       
            url: controller1 + "/" + task1,
            
            data: {datiDaInviare:  dati},
      
            success: function()
            {
               alert("Dati clinica inviati per effettuare la registrazione"); 
            },
            error: function()
            {
                alert("Chiamata fallita, si prega di riprovare...");
            }
            
     });
  • Re: Chiamata Ajax con metodo POST

    Eh, non so se perdonarti XD XD

    Scherzi a parte. A me funziona -_- -_-
Devi accedere o registrarti per scrivere nel forum
19 risposte