Führen Sie das PHP-Skript beim Klicken auf die Schaltfläche aus, ohne die Seite zu aktualisieren

Question

Ich habe Probleme bei der Verwendung von PHP und JavaScript.

Ziel: Wenn der Ereignis-Listener für eine HTML-Schaltfläche in einer .js-Datei aufgerufen wird, sollte das .php-Skript ausgeführt werden, ohne die Seite neu zu laden.

Erwartete Ergebnisse: Wenn auf die Schaltfläche geklickt wird, wird das PHP-Skript ausgeführt. In meinem Fall wird die Datei von der URL auf den Server heruntergeladen.

Tatsächliches Ergebnis: Ich weiß nicht, wie ich ein PHP-Skript aus einer JavaScript-Datei aufrufen soll.

Ich habe versucht, AJAX zu verwenden, aber nichts hat funktioniert. Und ich weiß nicht, wo ich die JQuery-Bibliotheksreferenz ablegen soll.

Ich habe auch versucht, ein Formular zu verwenden und eine Eingabe darin einzugeben (type="submit"), aber wenn die PHP-Funktion aufgerufen wird, aktualisiert sie die Seite und alles auf der Seite, was clientseitig angezeigt wurde, ist verschwunden.

HTML-Schaltfläche:

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

JavaScript-Ereignis-Listener (Ich habe Variablen Schaltflächen und Bilder zugewiesen):

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

PHP-Skript:

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

Wenn also auf eine Schaltfläche geklickt wird, möchte ich im Allgemeinen Folgendes tun:

1. Bild mit PHP von der URL auf meinen Server herunterladen
2. Verwenden Sie JavaScript, um im HTML-Bild Bild vom Server anzuzeigen (nicht von der URL, ich weiß, dass das möglich ist, aber für meine Verwendung muss es vom Server kommen)

Ich habe die Antwort von @Abhishek ausprobiert und festgestellt, dass das Problem jetzt in meiner PHP-Datei liegt. Es wird mir immer ein interner Serverfehler angezeigt. Finden Sie Fehler in diesem Code, wenn Sie ein Bild von $path (einer URL) auf meinen Server hochladen (Serververzeichnispfad ist $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

不需要其他库，您可以使用 vanillaJs 来完成此操作。
你的误解来自：“如何用Js调用php并获取返回值”
从这里开始，您有一个例子： https://www.w3schools.com/php/php_ajax_php.asp
一旦您能够调用 PHP 脚本，您就完成了目标的 70%

Answer 2

您可以执行以下操作。

1. 在页面的头部/底部添加 jquery，例如

2. 使用 jquery AJAX 并调用您的 php 脚本，如下所示

$("#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. 在您的 PHP 脚本 ex- test.php 中，使用如下代码来获取帖子参数。

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

并进行您想做的业务运营。