Comment obtenir un tableau d'images de PHP à Javascript ?

Question

Je suis un novice et je m'excuse si ma question est stupide,

J'ai développé un jeu de correspondance d'images avec un ensemble d'images par défaut, maintenant je veux accéder aux images du répertoire. La logique du jeu est faite en Javascript. J'ai utilisé php pour obtenir 8 images aléatoires du répertoire et le code est le suivant.

random.php :

 <?php $dire="Annotated Dataset/";
 $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
 shuffle($images);
   echo 'json_encode(array_slice($images,0,8))';
 ?>

Je veux utiliser les images dans le tableau ci-dessus dans la fonction Javascript qui a un switch case. Je voulais utiliser chaque image du tableau dans le cas du switch :

Game.js :

 function getgImage(number) {
 $.ajax({
      url: "random.php",
      type: "post",
      datatype: "json",
      data: {},
      success: function (response) {

         // You will get response from your PHP page (what you echo or print)
      },
      error: function(jqXHR, textStatus, errorThrown) {
         console.log(textStatus, errorThrown);
      }
    });

   if(number=='1'){
   return ranarray[0];
   }
   else if(number == '2'){
   return ranarray[1];
   }

   else if(number == '3'){
   return ranarray[2];
   } 

   else if(number == '4'){
   return ranarray[3];
   }

   else if(number == '5'){
   return ranarray[4];
   }

   else if(number == '6'){
   return ranarray[5];
   }

   else if(number == '7'){
   return ranarray[6];
   }

   else if(number == '8'){
   return ranarray[7];
   }
   else {
   return '<img src="resources/logo.png">';

   }
   }

J'ai essayé quelque chose comme dans le code ci-dessus, mais je ne suis pas en mesure d'obtenir les images dans le cas de commutation. Quelqu'un peut-il m'aider à résoudre ce problème ?

J'ai besoin que le tableau de 8 images de php soit dans le switch case du fichier javascript, chaque image pour chaque cas. Merci de m'aider à trouver une solution. Merci d'avance

Answer 1

Vous pouvez utiliser Ajax pour les récupérer à partir de PHP et les utiliser en JavaScript.

Conseil : die(json_encode(getgImage(1));

imagefetcher.php

function getRandomImage() {

  $dire   = "Annotated Dataset/";
  $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
  $images = shuffle($images);

  return $images[rand(0, (count($images) - 1))];

}

die(json_encode(getRandomImage()));

jeu.js

<script>
 $.ajax({
        url: "imagefetcher.php",
        type: "post",
        data: {},
        success: function (response) {
           // You will get response from your PHP page (what you echo or print)
           alert('Response from PHP file: ' + response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
</script>