Simple interaction between Javascript and PHP

Question

I have a minimal PHP script that utilises an open-source PHP Simple HTML DOM Parser. An external script, when called, reads in a webpage and returns it's content to index.php which displays it. The basic example I present below works, but I want to integrate the PHP call into javascript to make it interactive.

index.php

<html>
<head>
    <title>php / javascript interaction</title>
</head>
<body>
<?php include 'simple_html_dom_utility.php';?>
<?php include 'webpage_parser.php';?>

<script type="text/javascript">
    // this Javascript isn't fully implemented but illustrates the intent..
    links = ["http://en.m.wikipedia.org/wiki/Moon", "http://en.m.wikipedia.org/wiki/Star", 
             "http://en.m.wikipedia.org/wiki/Planet", "http://en.m.wikipedia.org/wiki/Sun"];
    k = 0;

    window.setInterval(function(){ // rotate through webpages
        var newurl = links[ k ];
        console.log(newurl);
        // call PHP here with 'newurl' argument to append new website's content to the DOM
        k = (k+1) % links.length;
    }, 5000);

</script>

</body>
</html>

webpage_parser.php

<?php
// this needs to change to accept input arguments for $url
$url = "http://en.m.wikipedia.org/wiki/Sun";
$html = file_get_html($url);
echo $html;
?>

simple_html_dom_utility.php is available here

I can foresee a jQuery solution may be needed to convert php-to-javascript content into DOM elements. For now I'm really just interested in getting php and javascript talking to each other.

Hi. I've used AJAX for a different application but am not very familiar with it. Do you know of any simple examples relevant to this? — geotheory
– geotheory, Commented Dec 30, 2014 at 19:08
And yes, using jQuery will be a much easier way to implement an AJAX solution that is cross-browser compatible. Here is the relevant feature: api.jquery.com/jquery.get — Nostalg.io
– Nostalg.io, Commented Dec 30, 2014 at 19:19

zia grosvenor · Accepted Answer · 2015-01-02 09:53:58Z

You can post the url in an AJAX request to the PHP file with jQuery. The content of the PHP file will then be sent back to the script and passed into the AJAX handlers callback as an argument, named here data. jQuery can also be used to write the data onto the page with $('element').html(data);

webpage_parser.php

<?php
    require 'simple_html_dom_utility.php';

    if(!$_POST['url']) {
        $url = "http://en.m.wikipedia.org/wiki/Sun";
    }
    else {
        $url = $_POST['url'];
    }

    $html = file_get_html($url);
?>
<div>
    <?php echo $html; ?>
</div>

This page which displays the content doesn't really need to be PHP. index.html

<html>
<head>
<title> Ajax example </title>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
    links = ["http://en.m.wikipedia.org/wiki/Moon", "http://en.m.wikipedia.org/wiki/Star", 
         "http://en.m.wikipedia.org/wiki/Planet", "http://en.m.wikipedia.org/wiki/Sun"];
    var k = 0;

    setInterval(function(){ 
         $.post("webpage_parser.php", { url: links[k] }, function(data,status){
             if(!data) {
                console.log(status)
             }
             else {
                 $('#content').html(data);
             }
         });
        if(k < links.length) {
            k++;
        }
        else {
            k = 0;
        }
    }, 5000);
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>

Collectives™ on Stack Overflow

Simple interaction between Javascript and PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related