Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. 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.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

J

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>
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Variables do not start with $ in JS, maybe learn some, no offense intended. Based on what I see flow is from PHP to Javascript so you will have to put it in HTML with Javascript. X E.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
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.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
joeworkman said:
Great advice on utilizing JavaScript to execute the fetch function. I would add one more piece of advice. You should not use file_get_contents to fetch a URL. You really should be using curl instead.

www.php.net

PHP: Basic curl examples - Manual

Basic curl examples
www.php.net www.php.net
Click to expand...
Yes you are right.
I also use curl() - I just wrote file_get_contents() in the code example to make it simpler.
 
Upvote 0 Downvote
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:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom