Rendere dinamico un sito web con chiamate ajax e php e variabili json

Domenico_Falco1 · 7 Giu 2019

Buona sera a tutti.

Sto tentando di creare un sito che sia con pagine dinamiche, cioè che l'header e il footer sia sempre fisso e cambi solo il contenuto della pagina interna, richiamandola con procedure ajax e php.

Ho letto la seguente discussione nel vostro forum : https://forum.mrw.it/threads/risolt...li-senza-refresh-di-pagina.50303/#post-209941, ed ho pensato di adattarla alla mia esigenza.

Allora giusto per essere precisi, posto innanzitutto le pagine e codice, ho la pagina iniziale index che è così :

HTML:

<?php
include('functions.php');
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="it"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="it"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="it"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9 modern" lang="it"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js modern" lang="it" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <!--<![endif]-->
<html lang="it">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Home</title>

<link rel="stylesheet" type="text/css" href="css.css" >
<link rel="stylesheet" type="text/css" href="stilenuovo.css" >

 <script src="jquery-1.5.2.min.js"></script>
 <script src="ajaxjs2.js"></script>
 
</head>

<body>

<div class="container-elements">
    <div class="cop-big"><embed type="image/svg+xml" src="TRINITYPICCOLO.svg" class="elastic" /></div>
    <div class="el-medium"><embed type="image/svg+xml" src="NOMETRINITY.svg" class="elastic1" /></div>
    <div class="el-small"><embed type="image/svg+xml" src="TRINITYCOMPICCOLO.svg" class="elastic" /></div>
  </div>

<div class="container-pulsantig">
<div class="pulsante1g"><a class="pulsanti" href="PRIMA.php">Home</a></div>
<div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php">Chi Siamo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TERRITORI.php">Territori</a></div>
<div class="pulsante1g"><a class="pulsanti" href="E-COMMERCE.php">E-Commerce</a></div>
<div class="pulsante1g"><a class="pulsanti" href="FINANZA.php">Finanza</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TURISMO.php">Turismo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="NORMATIVE.php">Normative</a></div>
</div>

<div id="container" class ="containere">
contenuto...
<div>

<?php
    include ('FOOTHER.php');
?>

la funzione functions.php è la seguente :

PHP:

<?php
/**
 * Funzione che controlla se la pagina è stata richiamata da una chiamata ajax oppure no
 * (TRUE se è stata richiamata da una chiamata ajax)
 * @return boolean
 */
function isAjax() {
    return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
}
?>

una pagina ad esempio da sostituire dinamicamente nel div container :

HTML:

<div class="primatitolog">
 <div class="presentazionetitolog"><strong>TURISMO</strong>
 </div></div>

 <div class="primatitolo">
 <div class="presentazionetitolo"><strong>TURISMO</strong></div>
 </div>

 <div class="container-presentazione">
 <div class="presentazione">
  TURISMO DESCRIZIONE
 </div></div>

e poi il codice js :

Codice:

jQuery(document).ready(function() {
    
    $('a.pulsanti').click(function(event) {
    //alert("wew");   
        
            if (history && history.pushState) {     
                //Inserisce la nuova pagina nella history del browser
                history.pushState(null, document.title, $(this).attr('href'));
                    
                    //Richiama la nuova pagina attraverso una chiamata ajax

$page = $(this).attr('href');
           $.ajax({
               type: "GET",
               url: "process.php",
               data: "page=" + $page,
               cache: false,
               dataType :'json',
               success: function(data){
                   $("#container").html(data["content"]);
                   $("title").html(data["title"]);
               }   
             });   
                event.preventDefault();   
            }
    });
});


window.addEventListener('load', function() {
  // $ = jQuery;
    
   setTimeout(function() {
      window.addEventListener('popstate', function() {
        $page = $(this).attr('href');
           $.ajax({
               type: "GET",
               url: "process.php",
               data: "page=" + $page,
               cache: false,
               dataType :"json",
               success: function(data){
                   $("#container").html(data["content"]);
                   $("title").html(data["title"]);
               }
                                 });   
      });
   }, 0);
    
});

e seguendo i vostri consigli ho chiaramente anche aggiungo il file process.php con il seguente codice :

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);

Ho pensato che visto che c'era l'echo del file join, nel div container del file principale index, si andasse a scrivere il contenuto della pagina da me richiamata con un link senza dover fare il refreh pagina, in altre parole ricomporre la nuova pagina con il comando echo con una variabile json.

Bene, si funziona ma se faccio visualizza codice sorgente, non mi appare tutto il codice di una pagina ma solo quello che contenuto nella pagina richiamata e se quindi ricarico la pagina, a video esce solo codice html presente nella pagina suddetta e non tutta una pagina completa di head e via del genere.

E poi la procedura window.addEventListener('load', function() {... che doverebbe diciamo simulare il caricamento della pagina con hystory.api non funziona per nulla.

Domenico_Falco1 · 8 Giu 2019

Buon giorno, chiaramente posso usare anche un semplice script con ajax, l'unico problema che mi viene fuori è che se ho un ulteriore link ad una delle pagine del sito nel div container ( che è il div dove vengono passate le pagine dal get di ajax, ) questo link non riesce ad associarsi alla chiamata ajax e quindi ricarica la pagina normalmente cioè con refresh, consigliatemi voi

Domenico_Falco1 · 8 Giu 2019

Dimenticavo, posso anche usare per le chiamate dinamiche il seguente codice in php, chiaramente supportato dall'array delle pagine da includere,

PHP:

<?php
if(isset($_GET['page']) && file_exists('./pagine/'.$_GET['page'].'.html'))
include('./pagine/'.$_GET['page'].'.html');
else
include('news.php');
?>

Ma poi non so gestire l'hystory. api quando si va avanti ed indietro con i tasti del browser, cioè a mettere il link con
history.pushState(null, document.title, $(this).attr('href')) ci riesco e che non so come ricollegarmi allo script di php riportato sopra nell'evento di window.addEventListener.

macus_adi · 8 Giu 2019

Potresti pensare di utilizzare backbone per la parte route...
La combinazione backbone - underscore/handlebars è una buona base di partenza... In alternativa potresti pensare di utilizzare react - angular - vue...

Quando si parla di WebApp non si invia html in asincrono, si inviano solo i dati:

Bootstrap Application:
-jquery 3.x
-backbone
-underscore

File di supporto:
route.js

Codice:

var route={
    //route_da_catturare:metodo da eseguire
    '':'getHome',
};

File RouterMenu.js estende backbone

Codice:

var RouteMenu = Backbone.View.extend ({
    el: '.my_elements',
    events: {
        //eventi es click tag a : eseguo medoto "onCLick"
        'click a' : 'onClick'
    },
    onClick: function( e ) {
        router.navigate=new Router;
    },
});
var Router = Backbone.Router.extend ({
     //sarebbe il file importato in precendeza route.js
     routes: route,
    //var locale
    fontend:new Frontend(),
     //metodo richiamato dal file route.js getHome
     getHome:function(){
        this.fontend.getHome();
    },
});

File Frontend.js

Codice:

var Frontend=Backbone.View.extend({
    //elemento sul quale agire per modificare il layout
     el:'#app',
     events:{},
     initialize:function(){
     },
     render:function(){
     },

     //metodo che viene eseguito dal file RouterMenu
     // per semplicità i metodi sono coincidenti
     getHome:function(){
          this.$el.html('SONO QUI');
     }
});

Nella funzione "render" potresti passare i dati e un template underscore che verrà popolato dinamicamente dal client senza onerose operazioni server....
nel file index.js per richiamare il tutto

Codice:

new RouteMenu();

Domenico_Falco1 · 8 Giu 2019

Buon giorno Macus, ti ringrazio della tua cortese risposta, ma sincero sincero non saprei neanche da dove iniziare con le procedure Bootstrap, non sono un professionista, sto solo cercando di farmi un sito con le poche conoscenze che ho, per questo ho postato i codici, perché li almeno ci capisco qualcosa e non mi limito ad un copia ed incolla... perdonami

Trovo molto interessante il codice della chiamata tramite codice php ed ho compreso come si usa, adesso mi rimane solo il problema dei codici per le history.api, cioè ho pensato che posso usare l'ajax per inserire l'indirizzo della pagina, ma non so ripeto come fare poi per l'evento : window.addEventListener('load', function(), per richiamare la pagina collegandomi allo script di php, se ci sono suggerimenti a riguardo, saranno ben accetti.

Grazie a priori.

Domenico_Falco1 · 8 Giu 2019

Chiedo scusa, ma ho notato che con questa procedura, praticamente la pagina fa un refresh, cosa che non desidero affatto, me sa che devo ritornare al metodo ajax, che la passa senza ricaricare header e footer. chiedo ancora scusa.

macus_adi · 8 Giu 2019

Domenico_Falco1 ha scritto:
Chiedo scusa, ma ho notato che con questa procedura, praticamente la pagina fa un refresh, cosa che non desidero affatto, me sa che devo ritornare al metodo ajax, che la passa senza ricaricare header e footer. chiedo ancora scusa.

Per ovviare a questi problemi si utilizzano framework per il supporto allo sviluppo... Tuttavia una soluzione che non è perfetta è questa: si adatta abbastanza facilmente...!
Non è commentata, ma facile da capire!

file index.js

Codice:

var Request=function(url){
    return $.ajax({
        url: url,
        type: 'GET',
        error: function (e) {
            console.log("errore chiamata", e);
        }
    }).then(function(dataJSON) {
        return dataJSON;
    });
}
$(document).ready(function(){

    Request('/request.php?p=getMenu').then(function(data){
        $('#nav_items ul').append(data.body);
        var elem=$('.item');
        var container=$('#container');
        elem.on('click',function(e){
            e.preventDefault();
            var response=Request('/request.php?p='+$(e.currentTarget).data('link'));
            response.then(function(data){
                container.html(data.body);
            });
            window.history.pushState( $(e.currentTarget).data('link'), '', $(e.currentTarget).data('link') )
            e.stopImmediatePropagation();
        });
    });

});

window.onpopstate = function(event) {
    var elem=document.location.pathname;
    console.log(event);
    var container=$('#container');
    elem=elem.split('/').pop();
    var response=Request('/request.php?p='+elem);
    response.then(function(data){
        container.html(data.body);
    });
};

File request.php

PHP:

/**
* Created by phpS
* User: macus_adi
* File: request.php
* Path: ${NAME}
* Date: 08/06/2019
* Time: 11:56
*/


if(!empty($_GET)){
   if(isset($_GET['p']) && !isset($_GET['param']))call_user_func($_GET['p']);
   else if(isset($_GET['p']) && isset($_GET['param']))call_user_func_array($_GET['p'],[$_GET['param']]);
}


function setOutput($data){
   header('Content-Type: application/json');
   echo json_encode($data);
}

function home(){
   return setOutput(['body'=>'<h1>Questo è solo un piccolo esempio</h1>']);
}

function getItems($param=0){

   return setOutput(['body'=>'<h1>Questo è solo un piccolo esempio su Items : Parametro passato - -'.$param.'</h1>']);
}


function getMenu(){
   $url_menu='';
   for($i=0;$i<10;$i++){
      $url_menu.='<li><a class="item" href="getItems" data-link="getItems&param='.$i.'">Link '.$i.'</a>';
   }
   return setOutput(['body'=>$url_menu]);
}

File index.html

Codice:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SetTitle</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div id="app">
    <div id="nav_items">
        <ul>
            <li>
                <a class="item" href="home" data-link="home">
                    Home
                </a>

            </li>
            <li>
                <a class="item" href="getItems" data-link="getItems">
                    items senza parametro
                </a>
            </li>
        </ul>
    </div>
    <div id="container"></div>
</div>
</body>
</html>

Domenico_Falco1 · 8 Giu 2019

Buon pomeriggio Macus_adi ed innanzitutto grazie

Sto guardando il tutto per capire le varie funzioni, ed ho delle perplessità per come adattarlo al mio scopo, iniziamo dalla funzione index.js , io già ho tutto i link scritti in questo modo :

HTML:

<div class="container-pulsantig">
<div class="pulsante1g"><a class="pulsanti" href="HOME.php">Home</a></div>
<div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php">Chi Siamo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TERRITORI.php">Territori</a></div>
<div class="pulsante1g"><a class="pulsanti" href="E-COMMERCE.php">E-Commerce</a></div>
<div class="pulsante1g"><a class="pulsanti" href="FINANZA.php">Finanza</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TURISMO.php">Turismo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="NORMATIVE.php">Normative</a></div>
</div>

però io leggo nella funzione

Codice:

$(document).ready(function(){

    Request('/request.php?p=getMenu').then(function(data){
        $('#nav_items ul').append(data.body);
        var elem=$('.item');
        var container=$('#container');
        elem.on('click',function(e){
            e.preventDefault();
            var response=Request('/request.php?p='+$(e.currentTarget).data('link'));
            response.then(function(data){
                container.html(data.body);
            });
            window.history.pushState( $(e.currentTarget).data('link'), '', $(e.currentTarget).data('link') )
            e.stopImmediatePropagation();
        });
    });

});

il comando : $('#nav_items ul').append(data.body); ma non voglio che venga aggiunto niente nel body;

poi nel file : request.php, leggo le funzioni : function home(), function getItems($param=0), function getMenu(), che sincero non ne vedo la necessità, visto che mi ripeto non ho nessuna necessità di riscrivere i link;

ed infine il vero problema è che se richiamo una pagina qualsiasi e dentro c'è un link che dovrebbe richiamare un'altra pagina, tutta la procedura dell'inclusione dinamica ( fatta sia con ajax o solo con il codice php ) non parte, si apre si la pagina ma con il solito refresh., ho pensato che il problema sia dovuto al fatto che la pagina iniziale con il link era stata richiamata a sua volta nel div container e anche se a video va bene, il link non riesce a collegarsi alle procedure suddette.

Spero di essere stato chiaro e ripeto grazie per il Tuo interessamento.

macus_adi · 8 Giu 2019

Domenico_Falco1 ha scritto:
però io leggo nella funzione

É un semplice esempio, non devi fare copia incolla.... Quello serve a farti capire il ragionamento...
Non mi metto a scrivere i link a mano....

Domenico_Falco1 ha scritto:
fatta sia con ajax o solo con il codice php ) non parte, si apre si la pagina ma con il solito refresh

Per evitare il refresh devi mettere in ascolto le risorse "link" che stampi da chiamata remota...
Potresti mettere nel "tag a" onclick e richiami una funzione che fa la stessa cosa del $(document).ready....

Codice:

<a onclick="fireAction(this)" data-link="link_che_vuoi">TXT</a>

Domenico_Falco1 · 8 Giu 2019

Buona sera, beh anche se come si intuisce sono un perfetto neofita, io ci ho provato ad adattare un pochino il tutto, ma niente da fare, sicuramente ho sbagliato qualcosa se non di più

Per completezza anche se so che farò infuriare qualcuno, posto il mio capolavoro...

Codice:

var Request=function(url){
    return $.ajax({
        url: url,
        type: 'GET',
        error: function (e) {
            console.log("errore chiamata", e);
        }
    }).then(function(dataJSON) {
        return dataJSON;
    });
}

$(document).ready(function(){

    Request('/request.php?p='+elem').then(function(data){
        var elem=$('.pulsanti');
        var container=$('#container');
        elem.on('click',function(e){
            e.preventDefault();
            var response=Request('/request.php?p='+$(e.currentTarget).data('link'));
            response.then(function(data){
                container.html(data.body);
            });
            window.history.pushState( $(e.currentTarget).data('link'), '', $(e.currentTarget).data('link') )
            e.stopImmediatePropagation();
        });
    });

});

window.onpopstate = function(event) {
    var elem=document.location.pathname;
    console.log(event);
    var container=$('#container');
    elem=elem.split('/').pop();
    var response=Request('/request.php?p='+elem);
    response.then(function(data){
        container.html(data.body);
    });
};

di seguito il file request.php

PHP:

/**
* Created by phpS
* User: macus_adi
* File: request.php
* Path: ${NAME}
* Date: 08/06/2019
* Time: 11:56
*/


if(!empty($_GET)){
   if(isset($_GET['p']) && !isset($_GET['param']))call_user_func($_GET['p']);
   else if(isset($_GET['p']) && isset($_GET['param']))call_user_func_array($_GET['p'],[$_GET['param']]);
}


function setOutput($data){
   header('Content-Type: application/json');
   echo json_encode($data);
}

ed infine il file index.php

HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="it"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="it"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="it"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9 modern" lang="it"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js modern" lang="it" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <!--<![endif]-->
<html lang="it">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Home</title>


<link rel="stylesheet" type="text/css" href="css.css" >
<link rel="stylesheet" type="text/css" href="stilenuovo.css" >



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
 <script src="ajaxjs3.js"></script>
        


</head>

<body>

<div class="container-elements">
    <div class="cop-big"><embed type="image/svg+xml" src="TRINITYPICCOLO.svg" class="elastic" /></div>
    <div class="el-medium"><embed type="image/svg+xml" src="NOMETRINITY.svg" class="elastic1" /></div>
    <div class="el-small"><embed type="image/svg+xml" src="TRINITYCOMPICCOLO.svg" class="elastic" /></div>
  </div>

<div class="container-pulsantig">   
<div class="pulsante1g"><a class="pulsanti" href="HOME.php" data-link="HOME.php" >Home</a></div>
<div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php" data-link="PRESENTAZIONE.php" >Chi Siamo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TERRITORI.php" data-link=>"Territori</a></div>
<div class="pulsante1g"><a class="pulsanti" href="E-COMMERCE.php" data-link="TERRITORI.php" >E-Commerce</a></div>
<div class="pulsante1g"><a class="pulsanti" href="FINANZA.php" data-link="FINANZA.php">Finanza</a></div>
<div class="pulsante1g"><a class="pulsanti" href="TURISMO.php" data-link="TURISMO.php">Turismo</a></div>
<div class="pulsante1g"><a class="pulsanti" href="NORMATIVE.php"  data-link="NORMATIVE.php">Normative</a></div>
</div>


<div id="container" class ="containere">

</div>

<?php
    include ('FOOTHER.php');
?>

</body>

</html>

e non funziona... il ragionamento logico l'ho compreso, praticamente con il js si prendono i dati delle pagine richiamate dai link e poi si girano al file php che li mette insieme in forma join e li riscrive con un echo nel body, purtroppo e chiedo davvero scusa ma non sono in grado di fare più di tanto, praticamente un mese fa non riuscivo neanche a centrare un div nella pagina e per quanto possa leggere di continuo degli esempi, me sa che la strada sarà lunghissima, pazienza e grazie ancora

macus_adi · 8 Giu 2019

Vedi il file di esempio, con link aggiunti da pagine derivate.....

Ho aggiunto la funzione che al click effettua la navigazione...
Prova! Fammi sapere come va!

Domenico_Falco1 · 8 Giu 2019

Perdonami Macus, ma non riesco ad integrarlo con i file delle pagine che ho preparate, tanto per farti vedere, io ho creato tante pagine che sono tutte così :

HTML:

 <div class="primatitolog">
 <div class="presentazionetitolog"><strong>TERRITORI</strong>
 </div></div>

 <div class="primatitolo">
 <div class="presentazionetitolo"><strong>TERRITORI</strong></div>
 </div>

 <div class="container-presentazione">
 <div class="presentazione">
  TERRITORI DESCRIZIONE
 </div></div>

e li richiamo con il link :

HTML:

<div class="container-pulsantig">
<div class="pulsante1g"><a class="pulsanti" href="TERRITORI.php">Territori</a></div>
</div>

ed a questa chiamata associo un get, quindi non sono così bravo da implementare il tuo script, ed alla fine anche se me lo scrivi, sarebbe un copia ed incolla e non è giusto, adesso provo con quello che so fare ed aggiungo il consiglio sull'onclic da aggiungere ai link che stampo da chiamata remota. quando avrò finito lo pubblico qui e davvero ti ringrazio tanto tanto.

Con stima sincera Domenico

Domenico_Falco1 · 9 Giu 2019

Buona sera, alla fine ci sono riuscito nel mio scopo, però ho usato interazione tra php e ajax, dove posso postare il risultato, così posso confrontarmi con chi vorrà a riguardo ? immagino nel forum di ajax, giusto ?

Cerca

Cerca

Rendere dinamico un sito web con chiamate ajax e php e variabili json

Domenico_Falco1

Nuovo Utente

Domenico_Falco1

Nuovo Utente

Domenico_Falco1

Nuovo Utente

macus_adi

Utente Attivo

Domenico_Falco1

Nuovo Utente

Domenico_Falco1

Nuovo Utente

macus_adi

Utente Attivo

Domenico_Falco1

Nuovo Utente

macus_adi

Utente Attivo

Domenico_Falco1

Nuovo Utente

macus_adi

Utente Attivo

Allegati

Domenico_Falco1

Nuovo Utente

Domenico_Falco1

Nuovo Utente

Discussioni simili