Laksanakan skrip PHP pada klik butang tanpa menyegarkan halaman

Question

Saya menghadapi masalah menggunakan PHP dan JavaScript.

Matlamat: Apabila pendengar acara untuk butang HTML dalam fail .js dipanggil, skrip .php hendaklah dilaksanakan, tanpa memuat semula halaman.

Hasil yang dijangkakan: Apabila butang diklik, skrip PHP akan dilaksanakan. Dalam kes saya, fail daripada URL akan dimuat turun ke pelayan.

Hasil sebenar: Saya tidak tahu cara memanggil skrip PHP daripada fail JavaScript.

Saya cuba menggunakan AJAX tetapi tidak berjaya. Dan saya tidak tahu di mana hendak meletakkan rujukan perpustakaan JQuery.

Saya juga cuba menggunakan borang dan meletakkan input di dalamnya (type="submit"), tetapi apabila fungsi PHP dipanggil, ia menyegarkan halaman dan semua pada halaman yang menunjukkan sisi klien hilang.

Butang HTML:

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

Pendengar acara JavaScript (saya telah menetapkan butang dan imej kepada pembolehubah):

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

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

Jadi secara amnya apabila butang diklik saya ingin melakukan perkara berikut:

1. Muat turun imej dari URL ke pelayan saya menggunakan PHP
2. Gunakan JavaScript untuk dipaparkan dalam imej HTML imej dari pelayan (bukan dari URL, saya tahu itu mungkin, tetapi untuk kegunaan saya, saya memerlukannya datang dari pelayan)

Saya mencuba jawapan @Abhishek dan mendapati bahawa masalahnya kini dalam fail php saya. Ia sentiasa memberi saya ralat pelayan dalaman. Adakah anda menemui sebarang pepijat dalam kod ini, memuat naik imej dari $path (yang merupakan URL) ke pelayan saya (serverdirectorypath ialah $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

Tiada perpustakaan tambahan diperlukan, anda boleh menggunakan vanillaJs untuk melakukan ini.
Salah faham anda datang daripada: "Cara memanggil php dengan Js dan mendapatkan nilai pulangan"
Dari sini anda mempunyai contoh: https://www.w3schools.com/php/php_ajax_php.asp
Sebaik sahaja anda boleh memanggil skrip PHP, anda adalah 70% daripada matlamat anda

Answer 2

Anda boleh melakukan perkara berikut.

1. Tambah jquery di kepala/bawah halaman, sebagai contoh

sssccc

2. Gunakan jquery AJAX dan panggil skrip php anda seperti yang ditunjukkan di bawah

$("#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. Dalam skrip PHP ex- test.php anda, gunakan kod berikut untuk mendapatkan parameter siaran.

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

Dan lakukan operasi perniagaan yang anda ingin lakukan.