Change Website Content with PHP and AJAX Without Page Reload

A server process changes the content of a file readme.txt which is located in a users home directory (Linux Ubuntu 20.04 Server). I want to reflect the file content on the page without fully reloading the site. Therefore I tried AJAX in the index.php file:

<!DOCTYPE html>
<html>
<head>
<title>Read a File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<?php
  $reader = file_get_contents("/userhome/readme.txt");
  echo $reader;
?>

<script type="text/javascript"> 
function readFile() { 
    $.get("index.php"); 
    return false; 
} 
</script>
  
<button onclick="readFile()">Click me</button>

</body>
</html>

JavaScript
​x
 
<!DOCTYPE html><html><head><title>Read a File</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body>​<?php  $reader = file_get_contents("/userhome/readme.txt");  echo $reader;?>​<script type="text/javascript"> function readFile() {     $.get("index.php");     return false; } </script>  <button onclick="readFile()">Click me</button>​</body></html>​

Shouldn’t an AJAX GET request to the PHP file itself load the new content and display it on the page?

Answer

reader.php

<?php
  $reader = file_get_contents("/userhome/readme.txt");
  echo $reader;
?>

JavaScript
 
<?php  $reader = file_get_contents("/userhome/readme.txt");  echo $reader;?>​

So basically after clicking the Read me button, the div with id read will be filled with the txt content

index.php

    <!DOCTYPE html>
    <html>
    <head>
    <title>Read a File</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
    

    <div id="read">

</div>
    <script type="text/javascript"> 
    $(document).ready(function(){
      $("#load").click(function(){
        $("#read").load("reader.php");
      });
    });
    </script>
      
    <button id="load">Read me</button>
    
    </body>
    </html>

JavaScript
 
    <!DOCTYPE html>    <html>    <head>    <title>Read a File</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    </head>    <body>    ​    <div id="read">​</div>    <script type="text/javascript">     $(document).ready(function(){      $("#load").click(function(){        $("#read").load("reader.php");      });    });    </script>          <button id="load">Read me</button>        </body>    </html>​

there are many other solutions for this

Advertisement

Answer