Remplacement code php par JavaScript

Version imprimable

23/09/2023, 16h12
regweb

Remplacement code php par JavaScript
Bonjour à tous,
dans une "Div=photo" je souhaiterai afficher les 50 images contenues dans le dossier "album".
Avec un peu de php, ça était vite résolu mais j'aimerai supprimer le php et faire la même chose en JS (jquery). Après avoir cojité un moment ... j'ai trouvé une solution. J'ai renommé toutes les photos en 01.jpg à 49.jpg. Avec le code suivant, j'arrive à afficher mes photos.
(boucle avec numphoto = 0 à 49)
Code:

1 2 var url = "albums/" + numphoto + ".jpg"; $("#photo").html(`<img src='${url}'>`);
Maintenant, je m'interroge s'il ne serait pas possible de faire sans renommer les photos.
Dans le dossier "album", j'ai créé un fichier "liste.txt" qui contient la liste des noms des photos. Là je coince ... comment récupérer cette liste (/tableau/liste.txt) dans un tableau ?
Merci d'avance pour vos lumières.

Salut regweb,

Avec la méthode fetch ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <script>
        async function getFile(url) {
            let tableau
            await fetch(url)
                .then((data) => data.json())
                .then(function (data) {
                    tableau = data;
                })
            return tableau
        }
 
        getFile('albums/liste.json').then(result => {
            for (let image of result) {
                console.log(`<img src='albums/${image.name}.jpg'>`)
            }
        })
    </script>

Format du fichier (liste.json)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{"name":"file_01"},
{"name":"file_02"},
{"name":"file_03"},
{"name":"file_04"},
{"name":"file_05"},
{"name":"file_06"},
{"name":"file_07"},
{"name":"file_08"},
{"name":"file_09"},
{"name":"file_10"},
{"name":"file_11"},
{"name":"file_12"}
]

pour récupérer le fichier il faut faire une requête ajax en get sans aucunes configuration de la requête par défaut le fichier sera reconnu en tant que string après cela il faut utiliser l'objet javascript string pour exploiter le fichier mais pour cela il faut savoir comment sont formater les donné du fichier

essai ce code qui utilise XMLHttpRequest() plutôt que fetch.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> function teste(){ var xhr = new XMLHttpRequest(); xhr.open('GET', '/chemin/texte.txt', true); xhr.onload = function(e) { if (this.status == 200) { var txt = document.createTextNode(xhr.response); document.body.appendChild(txt); } }; xhr.send(); } </script> </head> <body> <button onclick=teste()>teste</button> </body></html>
sinon l’idée de ASCIIDEFOND d'utiliser un fichier JSON plutôt qu'un fichier texte est intéressante.

24/09/2023, 11h50
regweb

Merci les gars, bon je vais tester les 2 solutions. Le contenu de mon fichier "liste.txt", comme je le génère, j'y mets ce que je veux. Encore merci, à suivre donc.
25/09/2023, 17h11
Dave Hiock

\ô/
j'ai deux interrogations quand même

Citation:

Envoyé par regweb

Avec un peu de php, ça était vite résolu mais j'aimerai supprimer le php et faire la même chose en JS (jquery).

pourquoi ?

Citation:

Envoyé par melka one

essai ce code qui utilise XMLHttpRequest() plutôt que fetch.

un peu dans le même style, quel est l'intérêt ?
25/09/2023, 19h16
melka one

tu pense trop :mrgreen:
25/09/2023, 22h24
regweb

Après essai, la 2eme solution est plus facile a exploiter car elle renvoie un String.
A la question "Pourquoi je cherche à supprimer le php" et bien le site LWS propose un nom de domaine pour 3€50/an plus hébergement de 2Go mais pas de PHP. Actuellement j'ai la version supérieure avec du Php, la version de base me suffirait largement mais faut réussir à convertir (comme dans ce cas) le php en Js.
Encore merci.
Reg
26/09/2023, 11h53
Dave Hiock

Citation:

Envoyé par melka one

tu pense trop

je ne pense pas trop, j'analyse.

Citation:

Envoyé par regweb

le site LWS propose un nom de domaine pour 3€50/an plus hébergement de 2Go mais pas de PHP.

Voilà un argument tout à fait recevable.