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

carbonchio · 8 Dic 2017

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 · 9 Dic 2017

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 · 9 Dic 2017

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 · 9 Dic 2017

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

ps, gli alert hanno solo lo scopo di controllo

carbonchio · 11 Dic 2017

Grazie mille Marino51,
appena ho un momento lo provo.

carbonchio · 14 Dic 2017

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 · 7 Giu 2019

@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

ma devi usare il tag

Grazie

Domenico_Falco1 · 7 Giu 2019

Buona sera, d'accordo, provvedo subito e chiedo scusa

Cerca

Cerca

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

carbonchio

Nuovo Utente

macus_adi

Utente Attivo

carbonchio

Nuovo Utente

marino51

Utente Attivo

carbonchio

Nuovo Utente

carbonchio

Nuovo Utente

Max 1

Super Moderatore

Domenico_Falco1

Nuovo Utente

Discussioni simili