點擊按鈕執行 PHP 腳本而不刷新頁面

Question

我在使用 PHP 和 JavaScript 時遇到問題。

目標：當呼叫 .js 檔案中 HTML 按鈕的事件偵聽器時，應執行 .php 腳本，無需重新載入頁面。

預期結果：點擊按鈕時，將執行 PHP 腳本。就我而言，來自 URL 的文件將下載到伺服器。

實際結果：我不知道如何從JavaScript檔案呼叫PHP腳本。

我嘗試使用 AJAX，但沒有任何效果。而且我也不知道到底該把 JQuery 的函式庫引用放在哪裡。

我還嘗試使用表單，並在其中輸入一個輸入（type =“submit”），但是當呼叫 PHP 函數時，它會刷新頁面，並且頁面上顯示客戶端的所有內容都消失了。

HTML 按鈕：

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

JavaScript 事件監聽器（我已將按鈕和圖像指派給變數）：

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

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

所以一般來說，當單擊按鈕時我想執行以下操作：

1. 使用 PHP 將圖片從 URL 下載到我的伺服器
2. 使用 JavaScript 在 HTML 圖像中顯示來自伺服器的圖像（不是來自 URL，我知道這是可能的，但為了我的使用，我需要它來自伺服器）

我嘗試了@Abhishek 的答案，發現問題現在出在我的 php 檔案中。它總是給我一個內部伺服器錯誤。 您是否發現此程式碼中有任何錯誤，將圖像從 $path （它是一個 URL）上傳到我的伺服器（serverdirectorypath 是 $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，例如

sssccc

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'];

並進行您想做的業務運作。