Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Ajax - how to load a website and receive data fra extern URL

jjdk

Coder
I hope someone has suggestions for a solution.

I am fetching data from an external location and it may take 20 seconds. I would like to show that data is being downloaded.
When the data has been received, the information that the data is being downloaded must be replaced with a receipt that the data has been retrieved successfully.
Sorry for my English, but I hope you understand.
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
    <head>
        <title>Read data from watermeter</title>
    </head>
    <body>
        <!-- Show this when website load and hide this when data is received-->
        <div class="showOnLoad">
            Receiving consumption - it can take up to 20 seconds.<br /><br />
            <img src="downloading.gif" alt="animated gif"><br /><br />
        </div>
        
        <!-- Hide this when website load and show this when data is received-->
        <div class="hideonLoad">
            Congratulations, the data has been received..<br /><br />
            <img src="thumbsup.gif" alt="thumbs up gif"><br /><br />
        </div>
        
        <?php
            //Call extern watermeter and retrieve data
            $result = file_get_contents('https://domain/data/cmd.php');
            print_r($result);
        ?>   
    </body>
</html>
 
Hi.

I would seperate your php in its own file, like this.

PHP:
<?php
// fetch_data.php

// retrieve data
$result = file_get_contents('https://domain/data/cmd.php');

// Test output
echo $result;
?>

And then handle the page itself with HTML5.

HTML:
...
...
...

<head>
    <title>42</title>
    <style>
        .showOnLoad {
            display: block;
        }
        .hideOnLoad {
            display: none;
        }
    </style>
</head>

<body>
    <!-- receiving -->
    <div id="loadingDiv" class="showOnLoad">
        Receiving data - it may take while...now go out for a walk...<br /><br />
        <img src="downloading.gif" alt="animated gif"><br /><br />
    </div>
    
    <!-- received -->
    <div id="successDiv" class="hideOnLoad">
        Data received, let's rock!!!<br /><br />
        <img src="thumbsup.gif" alt="thumbs up gif"><br /><br />
    </div>

    <script>
        // Lets fetch from the php file
        document.addEventListener("DOMContentLoaded", function() {
            fetch('fetch_data.php')
                .then(response => response.text())
                .then(data => {
                    console.log(data); // print data to console as example
                    document.getElementById('loadingDiv').style.display = 'none';
                    document.getElementById('successDiv').style.display = 'block';
                })
                .catch(error => console.error('Houston, we have a bug!!!', error));
        });
    </script>
</body>
</html>

I cant test my code just now, but i hope it gives atleast some ideas how you can approach your problem.
My suggestion is, that allways place the php code in seperated file.
 
Awesome - thank you very much for your input.
It almost works.....
Both files work, but the result of fetch_data.php does not appear in the html file.
I can't figure out how to print the fetched values from the php file ($result) in the html file.
 
Okay so what you may want to do is first check console for format and if that way is working. After that it should be in that last .then(...) so just use that variable named data in Javascript. If you are not getting your data in console that is a problem. X E.
 
Try 'document.getElementById("idOfElement").innerHTML=data;' with original code. Have an element with an ID and use it in that. Do you need an exact example? Could even try 'document.body.innerHTML=data;', remove ' from what I am saying to use. X E.
 
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
    <head>
        <title>Read data from watermeter</title>
    <style>
        .showOnLoad {
display: block;
}
.hideOnLoad {
display: none;
}
    </style>
    </head>
    <body>
        <div class="showOnLoad">
            Receiving consumption - it can take up to 20 seconds.<br /><br />
            <img src="downloading.gif" alt="animated gif"><br /><br />
        </div>
       
        <!-- Hide this when website load and show this when data is received-->
        <div class="hideOnLoad">
            Congratulations, the data has been received..<br /><br />
            <img src="thumbsup.gif" alt="thumbs up gif"><br /><br />
        </div>
    <!-- receiving -->
    <div id="loadingDiv" class="showOnLoad">
        Receiving data - it may take while...now go out for a walk...<br /><br />
        <img src="downloading.gif" alt="animated gif"><br /><br />
    </div>
   
    <!-- received -->
    <div id="successDiv" class="hideOnLoad">
        Data received, let's rock!!!<br /><br />
        <img src="thumbsup.gif" alt="thumbs up gif"><br /><br />
    </div>
    <p id="result"></p>
    <script>
        // Lets fetch from the php file
document.addEventListener("DOMContentLoaded", function() {
fetch('fetch_data.php')
.then(response => response.text())
.then(data => {
document.getElementById("result").innerHTML=data;
document.getElementById('loadingDiv').style.display = 'none';
document.getElementById('successDiv').style.display = 'block';
 })
.catch(error => console.error('Houston, we have a bug!!!', error));
});
    </script>
    </body>
</html>
Does this help? X E.
 
Loading data from an external URL with Ajax is pretty straightforward once you get the hang of it. In this code snippet, we're making a GET request to 'http://example.com/data' and expecting JSON data in return. The success function handles the data once it's retrieved, and the error function deals with any issues that might come up. Make sure to replace 'http://example.com/data' with the actual URL you want to fetch data from. Also, remember to handle CORS (Cross-Origin Resource Sharing) if your website and the external URL are on different domains. Using Ajax is a great way to fetch data dynamically without reloading the entire page. It’s super useful for things like updating content, fetching data for local seo, or interacting with APIs.
Hope this helps you get started! Let me know if you have more questions or need further clarification.
 
Last edited:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom