Immagini su db caricate da metodo $.ajax

**Alfoxx** · 28-11-2016, 14:08

Ciao a tutti ragazzi
stavo realizzando uno slideshow e ci sono riuscito: riesco a far scorrere le immagini caricate nella pagina in modo ottimale , andando indietro ed avanti.

Ora vorrei fare in modo di caricare queste immagini da un db tranne la prima che parte con il sito.
Allora ho fatto in modo di salvare queste immagini nel mio db, e precisamente in una tabella "slideshow" con 4 colonne (id, titolo, descrizione,indirizzo_foto), e salvare effettivamente le immagini in una cartella del mio spazio web.
Con un file php (quello che dovrei richiamare con il metodo $.ajax del mio file html), riesco a visualizzare l'elenco di tutte le info ed anche visualizzare le vere immagini.

Codice PHP:


while ($riga = mysqli_fetch_array($rs)) {
    $str_id = $riga['id'];
    $str_nome = $riga['titolo'];
    $str_desc = $riga['descrizione'];
    $str_indirizzo = $riga['indirizzo_foto'];
    /*echo "Riga:  $str_id -> Titolo: $str_nome - Descrizione: $str_desc - Indirizzo: $str_indirizzo<br>
    <img src='".$str_indirizzo."'><br>";*/
  
    echo"Id: $str_id - Indirizzo: $str_indirizzo<br>";
    }

vorrei che appena si clicca sul tasto dx o sx riesco a caricare le immagini memorizzate nel db. Cosa devo fare?

Come devo fare a prelevare con jquery il valore id della riga e visualizzare la rispettiva immagine?

con il metodo $.ajax riesco a scorrere ad esempio un file .xml ed andare a prelevare i vari campi del suo dom (con il metodo .each e poi tramite $(this) e .find ('nodo xml') )

codice:

<script>
$(document).ready(function() {
 var spostamento = 0, spostamentodx= 0, spostamentosx=0;
    var imgdim = 570;
    var artdim = 510;
    var numimg = 2;
    var $box = $('#boxslide');
    var next=0, prec=0;            


 $('.prec').click(function() {
        animo('prec');
    });
    $('.succ').click(function() {
        animo('succ');
    });

    function animo(tipo) {
        if (tipo=='succ' && spostamento>-imgdim*numimg) {
            spostamento -= imgdim;
      slideDB()
            $box.css('margin-left',spostamento+'px');
        } else if (tipo=='prec' && spostamento<0) {
            spostamento += imgdim;
        slideDB()
            $box.css('margin-left',spostamento+'px');
        }
    }



    function slideDB() {
        $.ajax({
            url: 'lettura-da-altervista_per_slideshow.php',
            dataType: "HTML",
         
            success: function (dati) {
              console.log(dati);
//var img = "<im src=\"" +  + "\">""
  //$(img).insertBefore('.prec');
         }
        });



});
</script>


</head>
<body>
<section id="slogan">
    <div id="controllo_slide">
                <div id="finestra_slide">
                            <div id="boxslide">
                                <img src="../images/slide1.png" width="570" alt="Slide 1">
   <!--  queste sono le immagini che vorrei caricare da db                           <img src="../images/slide2.png" width="570" alt="Slide 2">
                               <img src="../images/slide3.png" width="570" alt="Slide 3">  -->

                             </div>
                 </div>
<a href="#" class="prec"><img src="../images/prev.png" width="24" height="43" alt="Precedente"></a>
  <a href="#" class="succ"><img src="../images/next.png" width="24" height="43" alt="Successivo"></a>
                    </div>
<img src="../images/cornice.png" alt="">
                </section>

</body>
</html>

Per rendermi conto di cosa "dati" nel metodo $.ajax potesse essere, l'ho inviata alla consolle, riesco a vedere oltre all'indirizzo delle mie immagini anche altro codice html che mi da altervista.

**m4rko80** · 01-12-2016, 10:11

Ciao, bene o male il discorso è corretto. Da php fatti ritornare l'array/object dei dati foto. Per comodità di utilizzo in formato array e non con l'echo così come fatto, e quindi

codice:

$result = array();
while ($riga = mysqli_fetch_array($rs)) {
$result[] = $riga;
    }  
echo json_encode($result);

Ora nel tuo data in success avrai tutto l'oggetto immagini in questo formato

codice:

[{'chiave':'valore', 'chiave2':'valore2',........}]

]
contenente le chiavi e valori come da PHP.
Ti costruisci i tag img come fatto sopra e li inserisci nel dom(nella slide)

codice:

var image = '<img .....>';
$('#boxslide').append(image);

Questo potresti farlo al caricamento, senza necessità di caricare la prima immagine statica e prima di mostrare lo slide volendo.
In più la parte che fa la chimata in ajax per recuperare le immagini potresti richimarla per refreshare le immagini (se ce ne fossere di nuove ad esempio).

**Alfoxx** · 05-12-2016, 13:41

Originariamente inviata da m4rko80

Ciao, bene o male il discorso è corretto. Da php fatti ritornare l'array/object dei dati foto. Per comodità di utilizzo in formato array e non con l'echo così come fatto, e quindi

codice:

$result = array();
while ($riga = mysqli_fetch_array($rs)) {
$result[] = $riga;
    }  
echo json_encode($result);

Ora nel tuo data in success avrai tutto l'oggetto immagini in questo formato

codice:

[{'chiave':'valore', 'chiave2':'valore2',........}]

]
contenente le chiavi e valori come da PHP.
Ti costruisci i tag img come fatto sopra e li inserisci nel dom(nella slide)

codice:

var image = '<img .....>';
$('#boxslide').append(image);

Questo potresti farlo al caricamento, senza necessità di caricare la prima immagine statica e prima di mostrare lo slide volendo.
In più la parte che fa la chimata in ajax per recuperare le immagini potresti richimarla per refreshare le immagini (se ce ne fossere di nuove ad esempio).

Grazie Marko del tuo suggerimento

non ti ho risposto subito perchè l'influenza mi ha frenato per tanto tempo. Oggi è il primo giorno di ripresa delle attività, ma non so cosa riesco a fare.
Intanto ti ringrazio ancora per gli spunti

**Alfoxx** · 06-12-2016, 17:58

Ciao Marko, ho ragionato su ciò che mi hai detto.

Modificando il file di lettura delle immagini dal db(cioè il file .php richiamato dal metodo $.ajax) in questo modo

Codice PHP:


$strsql= "SELECT * FROM slideshow ";
$rs = @mysqli_query($link, $strsql) or die("Errore query database: " . mysqli_error($link));


    $result = array();
    while ($riga = mysqli_fetch_array($rs)) {
        $result[] = $riga;
    }
    echo json_encode($result);

ed eseguendolo io vedo visualizzato un grande array contente tutte le info della riga della tabella del db
con info ripetute.

codice HTML:

{"0":"1","id":"1","1":"prima slide","titolo":"prima slide","2":"prima slide dello slideshow","descrizione":"prima slide dello slideshow","3":"http:\/\/miosito.org\/img_s_show\/slide1.png","indirizzo_foto":"http:\/\/miosito.org\/img_s_show\/slide1.png"},

{"0":"2","id":"2","1":"seconda slide","titolo":"seconda slide","2":"seconda slide dello slideshow","descrizione":"seconda slide dello slideshow","3":"http:\/\/miosito.org\/img_s_show\/slide2.png","indirizzo_foto":"http:\/\/miosito.org\/img_s_show\/slide2.png"},

{"0":"3","id":"3","1":"terza slide","titolo":"terza slide","2":"terza slide dello slideshow","descrizione":"terza slide dello slideshow","3":"http:\/\/miosito.org\/img_s_show\/slide3.png","indirizzo_foto":"http:\/\/miosito.org\/img_s_show\/slide3.png"},

Ora nel file contenente lo script javascript ho modificato così la chiamata $.ajax al file esterno, ma non mi funziona:

codice:

var $box = $('#boxslide');



$('.prec').click(function() {
        animo('prec');
    });
    $('.succ').click(function() {
        animo('succ');
    });


    function animo(tipo) {
        if (tipo=='succ' && spostamento>-imgdim*numimg) {
            spostamento -= imgdim;
            slideDB();
            $box.css('margin-left',spostamento+'px');
        } else if (tipo=='prec' && spostamento<0) {
            spostamento += imgdim;
            slideDB();
            $box.css('margin-left',spostamento+'px');
        }
    }


    
    
    function slideDB() {
        $.ajax({
            url: 'lettura-da-altervista_per_slideshow.php',
            dataType: "HTML",
             
            success: function (dati) {    /*dati è l'array che riceve dal filelettura-da-altervista_per_slideshow.php*/

                     console.log(dati);
                var indi=dati.indirizzo_foto;   /*ho immaginato di accedere a questa chiave "indirizzo_foto" dell'array e di salvare così l'indirizzo nella variabile indi*/

                var image = "<img src=\"" + indi + "\">"
                $('#boxslide').append(image);
            }
        });

Cosa devo ancora affinare?

**m4rko80** · 13-12-2016, 18:56

Ciao, scusa se rispondo solo ora ma non sto spesso sul forum.
In dati, hai un array e quindi dati.indirizzo_foto non hai nulla. Dovrai quindi ciclare dati e ad ogni elemento avrai i tuoi dati

codice:

for(i in dati){
 dati[i].indirizzo_foto 
//e così via...
}

In questo modo o con each() di jQuery

Il fatto che in dati hai dati duplicati, chiave numerica + stringa dipende da cosa usi con PHP
Puoi provare con assoc al posto di mysqli_fetch_array

**Alfoxx** · 19-12-2016, 17:42

Originariamente inviata da m4rko80

Ciao, scusa se rispondo solo ora ma non sto spesso sul forum.
In dati, hai un array e quindi dati.indirizzo_foto non hai nulla. Dovrai quindi ciclare dati e ad ogni elemento avrai i tuoi dati

codice:

for(i in dati){
 dati[i].indirizzo_foto 
//e cosï¿½ via...
}

In questo modo o con each() di jQuery

Il fatto che in dati hai dati duplicati, chiave numerica + stringa dipende da cosa usi con PHP
Puoi provare con assoc al posto di mysqli_fetch_array

ciao Marko
grazie per la tua risposta. Anche io in questa settimana non sono stato molto presente e non ho studiato molto.
Ti volevo chiedere una cosa: il ciclo for lo imposti cosï¿½?
mi sembra strano. o la condizione del ciclo for ï¿½ una spiegazione?

facendo così sembra che vada bene

codice:

   $(dati).each(function (i, e) {//scorro questo oggetto                   
        
                var image = "<img src=\"" + e.indirizzo_foto + "\">";
           
              console.log(e.indirizzo_foto);
             
                $('#boxslide').append(image);
            });

**m4rko80** · 20-12-2016, 10:18

Ciao, era più un esempio, che poi tu utilizzai il ciclo classico javscript o quello proposto da jquery si tratta comunque di ciclare.
Nel tuo caso presumo posso andar bene $.each visto che ottieni quello che ti serve. Il alcuni casi potrebbe essere da valutare in quanto il cilco $.each funziona un po' come una chiamata asyncrona, se provi a ciclare qualcosa di numeroso ed eseguire altro codice subito dopo potrebbe capitare che venga eseguita l'istruzione succesiva prima della fine del ciclo stesso. Dovresti quindi aggingere dei controlli su questo.

**Alfoxx** · 22-12-2016, 11:54

Originariamente inviata da m4rko80

Ciao, era più un esempio, che poi tu utilizzai il ciclo classico javscript o quello proposto da jquery si tratta comunque di ciclare.
Nel tuo caso presumo posso andar bene $.each visto che ottieni quello che ti serve. Il alcuni casi potrebbe essere da valutare in quanto il cilco $.each funziona un po' come una chiamata asyncrona, se provi a ciclare qualcosa di numeroso ed eseguire altro codice subito dopo potrebbe capitare che venga eseguita l'istruzione succesiva prima della fine del ciclo stesso. Dovresti quindi aggingere dei controlli su questo.

grazie Marco della risposta.
Ti posso chiedere, se hai voglia, di mostrarmi i controlli di cui parli?

Discussione: Immagini su db caricate da metodo $.ajax

Strumenti discussione

Ricerca discussione

Visualizza

Immagini su db caricate da metodo $.ajax

Permessi di invio