[RISOLTO][PHP] Passaggio variabili senza refresh di pagina

carbonchio

Nuovo Utente
8 Dic 2017
6
0
1
Buongiorno a tutti.
Ho un problema con una pagina php piuttosto banale, dove ho un menu ad albero costruito leggendo delle directory che contengono file html. Poi creo dei link nella forma canonica "pagina.php?p=valore da passare". Al click sul link viene incorporato del codice html nella pagina, e fin qui tutto bene. Però in questo modo ad ogni click si ricarica la pagina e viene ricreato l'albero con spreco di risorse, senza contare che l'albero si richiude ogni volta e non è pratico.
Ho letto che si possono passare le variabili con uno script ajax senza ricaricare la pagina, ma non ho capito bene come funzioni. Se qualcuno gentilmente me lo potesse spiegare con un piccolo esempio sarebbe molto gradito.
Sper di aver postato nella giusta sezione...
Ringrazio anticipatamente
 

macus_adi

Utente Attivo
5 Dic 2017
1.128
64
48
IT/SW
Dovresti fare una navigazione attraverso il caricamento delle pagine (contenuto) attraverso AJAX in maniera asincrona, in questo modo non vedrai la pagina ricaricarsi ogni volta.
Spero sia utile
 

carbonchio

Nuovo Utente
8 Dic 2017
6
0
1
Grazie Macus_adi,
a livello teorico penso anch'io sia la soluzione, non ho chiara la realizzazione a livello tecnico.
Ad esempio credo si debba usare la funzione
PHP:
$.ajax();
ma non ho capito come attivarla nel link.
Per questo chiedevo un piccolo esempio pratico.
 

marino51

Utente Attivo
28 Feb 2013
2.678
135
63
Lombardia
file : esempio_11.html
HTML:
<!DOCTYPE html>
    <head>
        <title>jQuery AJAX test</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
$(document).ready(function(){
    $('#myButton').bind("click",function()
    {
        alert( "Handler for .click() called." );

        var data =
        {
            foo:  123,
            bar:  456,
            rows:
            [{
                column1: 'hello',
                column2: 'hola',
                column3: 'bonjour',
            },
            {
                column1: 'goodbye',
                column2: 'hasta luego',
                column3: 'au revoir',
            },
            {
                column1: 'hello',
                column2: 'hola',
                column3: 'bonjour',
            },
            {
                column1: 'goodbye',
                column2: 'hasta luego',
                column3: 'au revoir',
            }],
            test1:
            {
                test2:
                {
                    test3: 'abcdef'
                }
            }
        }

        alert(data['foo']+' - '+data['test1']['test2']['test3']);

        $.ajax
        ({
            type:    'post',
            cache:   false,
            url:     'esempio_11.php',
            data:    data,
            success: function(response) { $('#myDiv').html(response); },
            error:   function()         { $('#myDiv').html("malfunzionamento ajax"); }
        });
    });
});
        </script>
    </head>
    <body>
        <input id="myButton" type="button" style="width: 130px; height: 60px" value="send AJAX" />
        <br /> <br />
    <div id="myDiv"> </div>
    </body>
</html>
file : esempio_11.php
PHP:
<?php
echo "ho ricevuto l'array e restituisco questo testo";
?>
l'esempio è molto semplice,
la variabile data contiene, in questo caso, un'array, dovrà contenere le informazioni da passare allo script php
php restituisce una stringa di caratteri che viene visualizzata
spero sia sufficiente per creare ciò che ti serve

upload_2017-12-9_11-44-15.png

upload_2017-12-9_11-45-0.png


ps, gli alert hanno solo lo scopo di controllo
 

carbonchio

Nuovo Utente
8 Dic 2017
6
0
1
Grazie mille Marino51,

dal tuo esempio pratico sono riuscito ad ottenere (con qualche difficoltà) il comportamento che cercavo.
Posto il codice nel caso servisse a qualcun'altro:

ho un albero di navigazione con link del tipo
HTML:
<li><a class="menu" href="data/01-Leopardi 1934-1963/06/06-00.html">La nuova poetica leopardiana</a>
Codice ajax:
HTML:
<script>
   $(document).ready(function(){
       $('a.menu').click(function(e){
           e.preventDefault();
           $page = $(this).attr('href');
           $.ajax({
               type: "GET",
               url: "process.php",
               data: "page=" + $page,
               cache: false,
               dataType :'json',
               success: function(data){
                   $("#dynamic").html(data["content"]);
                   $("title").html(data["title"]);
               }
           });
       });
   });
</script>
e nella pagina process.php:
PHP:
    $content = "";
    $title = "";

    if(isset($_GET['page'])){
            $html = file_get_contents($_GET['page']);
            $dom = new DOMDocument('1.0', 'UTF-8');
            $dom->loadHTML($html);
            $element = $dom->getElementById("idContainer");
            $title = $dom->getElementsByTagName("title");
            $content = $dom->saveHTML($element);
    }
   
    $return_arr = ["title" => $title->item(0)->nodeValue,
                   "content" => $content];
    echo json_encode($return_arr);
in pratica al click dell'utente sul link intercetto l'evento e invio una richiesta ajax a process.php inviando l'url della pagina, process.php estrae il title ed il contenuto del div principale ("idContainer") e me li invia come array (json), dopodichè aggiorno la pagina SENZA refresh.
Grazie a tutti e alla prossima
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.009
295
83
@Domenico_Falco1
Apri una discussione tutta tua!
È sempre meglio sia per te che avrai più risposte e più mirate che per l'autore di questa discussione!!
Ricorda però che per postare codice PHP non devi usare il tag
code.gif
ma devi usare il tag
php.png

Grazie