Exécuter le script PHP en cliquant sur le bouton sans actualiser la page

Question

J'ai des difficultés à utiliser PHP et JavaScript.

Objectif : Lorsque l'écouteur d'événement d'un bouton HTML dans un fichier .js est appelé, le script .php doit être exécuté, sans recharger la page.

Résultats attendus : Lorsque vous cliquez sur le bouton, le script PHP sera exécuté. Dans mon cas, le fichier de l'URL sera téléchargé sur le serveur.

Résultat réel : Je ne sais pas comment appeler un script PHP à partir d'un fichier JavaScript.

J'ai essayé d'utiliser AJAX mais rien n'a fonctionné. Et je ne sais pas où mettre la référence de la bibliothèque JQuery.

J'ai également essayé d'utiliser un formulaire et d'y mettre une entrée (type="submit"), mais lorsque la fonction PHP est appelée, elle actualise la page et tout ce qui montrait le côté client sur la page a disparu.

Bouton HTML :

<button type="button" class="button" id="btnsubmit">Submit</button>
<img class="image" id="someimage">

Écouteur d'événements JavaScript (j'ai attribué des boutons et des images à des variables) :

btnsubmit.addEventListener("click", () => {
    someimage.src = "directory/downloadedimg.png";
});

Script PHP :

<?php
    $path = 'https://somewebsite.com/imagetodownload.png';
    $dir = 'directory/downloadedimg.png';
    
    $content = file_get_contents($path);
    $fp = fopen($dir, "w");
    fwrite($fp, $content);
    fclose($fp);
?>

Donc, généralement, lorsqu'on clique sur un bouton, je souhaite faire ce qui suit :

1. Télécharger l'image depuis l'URL vers mon serveur en utilisant PHP
2. Utilisez JavaScript pour afficher en HTML l'image image du serveur (pas depuis l'URL, je sais que c'est possible, mais pour mon utilisation j'ai besoin qu'elle provienne du serveur)

J'ai essayé la réponse de @Abhishek et j'ai découvert que le problème est maintenant dans mon fichier php. Cela me donne toujours une erreur interne du serveur. Trouvez-vous des bugs dans ce code lors du téléchargement de l'image depuis $path (qui est une URL) vers mon serveur (serverdirectorypath est $image_url) :

<?php
$params = $_POST['data'];
$path = $params['path'];
$image_url = $params['image-url'];
    
$content = file_get_contents($path);
$fp = fopen($image_url, "w");
fwrite($fp, $content);
fclose($fp);
?>

Answer 1

Aucune bibliothèque supplémentaire n'est requise, vous pouvez utiliser vanillaJs pour ce faire.
Votre incompréhension vient de : "Comment appeler php avec Js et obtenir la valeur de retour"
À partir de là, vous avez un exemple : https://www.w3schools.com/php/php_ajax_php.asp
Une fois que vous êtes capable d'appeler un script PHP, vous avez atteint 70% de votre objectif

Answer 2

Vous pouvez faire ce qui suit.

1. Ajoutez jquery en tête/bas de page, par exemple

sssccc

2. Utilisez jquery AJAX et appelez votre script php comme indiqué ci-dessous

$("#button-id").on('click',function(){
            var data = {"image-url" : "directory/downloadedimg.png","path" : "https://somewebsite.com/imagetodownload.png"};
            $.ajax({
              type: 'POST',
              url: "{hostname}/test.php",
              data: data,
              dataType: "json",
              success: function(resultData) { alert("success"); }
           });
        });

3. Dans votre script PHP ex-test.php, utilisez le code suivant pour obtenir les paramètres de publication.

$params = $_POST['data'];
    $path = $params['path'];
    $image_url = $params['image-url'];

Et faites les opérations commerciales que vous souhaitez faire.