Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Evitare ricaricamento pagina con Ajax

    Ciao a tutti, vorrei che, al click sul submit di un semplice form, venga eseguito del codice php senza dover ricaricare completamente la pagina. E' possibile fare ciò con l'aiuto di Ajax? Lo scopo è evitare la visualizzazione della pagina bianca in quel mezzo secondo in cui viene effettuato il caricamento (nel seguente caso è impercettibile, ma nei siti molto pesanti è così). Spero di essermi spiegato. Grazie!

    codice:
    <html>
    <head>
    </head>
    <body>
            
        <?php
        if (isset($_POST['test'])) {
            echo "ricevuto";
        }
        ?>
    
    
        <form action="#" method="POST">
        <input type="hidden" name="test">
        <input type="submit" value="Invia" />
        </form>
            
    </body>
    </html>

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,132
    Se la domanda è posso eseguire una chiamata ajax richiamando la stessa pagina "madre"?
    La risposta è si è possibile ma complesso da gestire, e se non hai buone conoscenze di ajax resta sul tradizionale paginaform -> chiamata ajax -> paginadati
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Grazie per la risposta, in alternativa c'è modo di visualizzare la pagina aggiornata solo dopo il caricamento completo? Ripeto, lo scopo è evitare la pagina "vuota" che si vede in quel mezzo secondo in fase di refresh..

  4. #4
    Utente di HTML.it L'avatar di gnerpo
    Registrato dal
    Jul 2015
    residenza
    Pescara
    Messaggi
    10
    Basta mettere il body a display:none e poi usare jquery per mostrarlo.

    Nell'esempio allegato c'ho messo un ritardo (per simulare il caricamento della pagina) e un effetto di fadein (che rende tutto più fico!):

    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>test page</title>
        
        <!-- JQUERY -->
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $( window ).load(function( ) {
                $("#body_id").delay("slow").fadeIn();
            });
        </script>
    </head>
    
    
    <body id="body_id" style="display:none">
        CIAO!
    </body>
    </html>
    Ultima modifica di gnerpo; 24-07-2015 a 23:59
    Visita il mio sito sul web design e la programmazione: http://www.webcome.it

  5. #5
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Se la domanda è posso eseguire una chiamata ajax richiamando la stessa pagina "madre"?
    La risposta è si è possibile ma complesso da gestire, e se non hai buone conoscenze di ajax resta sul tradizionale paginaform -> chiamata ajax -> paginadati
    Non sono molto ferrato con ajax, ma sto imparando con la pratica e mi sto ispirando a qualcosa del genere (anche se diverso):

    pagina A
    codice:
    <html>
        <head>
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script>
                function chk()
                    {
                    var name=document.getElementById('name').value;
                    var dataString='name='+ name;
                    $.ajax({
                        type: "post",
                        url: "b.php",
                        data: dataString,
                        cache: false,
                        success: function(html){
                            $('#msg').html(html);
                        }
                    })
                    return false;
                    }
            </script>
        </head>
        <body>
            <form>
                <input type="text" id="name">
                <br><br>
                <input type="submit" value="submit" onclick="return chk()">
            </form>
            <p id="msg"></p>
        </body>
    </html>

    pagina B
    codice:
    <?php
    $name = $_POST['name'];
    echo "Response: ".$name;
    ?>

    Si può adattare questa tecnica allo script seguente in modo che venga eseguito il php senza dover ricaricare la pagina?

    codice:
    <html>
    <head>
    </head>
    <body>
            
        <?php
        if (isset($_POST['test'])) {
            echo "ricevuto";
        }
        ?>
    
    
        <form action="#" method="POST">
        <input type="hidden" name="test">
        <input type="submit" value="Invia" />
        </form>
            
    </body>
    </html>

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,132
    La soluzione più rapida cambia il tasto submit con un tasto button se vuoi proseguire con il submit documenti qui
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    La soluzione più rapida cambia il tasto submit con un tasto button se vuoi proseguire con il submit documenti qui
    Non intendevi questo, vero?

    codice:
    <button type="button" onClick="document.forms.nomeform.submit()">Invia</button>

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,132
    No più semplicemente
    <form>
    <inputtype="text"id="name">
    <br><br>
    <inputtype="Button"value="submit"onclick="chk()">
    </form>
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.