Question

我有一个使用开源PHP Simple HTML DOM Parser的最小PHP脚本。调用外部脚本时会读入网页并将其内容返回到显示它的index.php。我在下面介绍的基本示例有效，但我希望将PHP调用集成到javascript中以使其具有交互性。

的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

我可以预见，将php-to-javascript内容转换为DOM元素可能需要jQuery解决方案。现在，我真的只是想让php和javascript互相交谈。

Answer 1

您可以使用jQuery将AJL请求中的url发布到PHP文件中。然后，PHP文件的内容将被发送回脚本并作为参数传递给AJAX处理程序回调，在此处命名为data。 jQuery还可用于使用$('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>

显示内容的页面并不真正需要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>

Javascript和PHP之间的简单交互

1 个答案: