Tengo un problema con PHP y JavaScript.

Objetivo : se debe ejecutar un script .php cuando se llama al detector de eventos del botón HTML en el archivo .js sin recargar la página.

Resultado esperado : cuando se hace clic en el botón, se ejecuta el script PHP. En mi caso, se descargará un archivo desde una URL al servidor.

Resultado real : no sé cómo llamar al script PHP desde el archivo JavaScript.

Intenté usar AJAX, pero nada funcionó realmente. Además, no sabía dónde colocar exactamente la referencia de la biblioteca para JQuery.

También traté de usar un formulario, y dentro de él una entrada (type="submit"), pero cuando esto llama a la función PHP, actualiza la página y todo en la página que mostraba el lado del cliente desaparece.

El botón HTML:

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

El detector de eventos de JavaScript (tengo el botón y la imagen ya asignados a una var):

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

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

Entonces, en general, quiero hacer lo siguiente cuando se hace clic en el botón:

1. Descargar la imagen de la URL a mi servidor usando PHP
2. Muestre la imagen del servidor (no de la URL, sé que es posible, pero para mi uso necesito que sea del servidor) en una imagen HTML usando JavaScript

Probé la respuesta de @Abhishek y pensé que el problema ahora está en mi archivo php. Siempre me da un error interno del servidor. ¿Detecta algún error en este código para cargar la imagen desde $path (es una URL) a mi servidor (serverdirectorypath es $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); ?>