单击一个按钮以在 PHP 中运行 casperJS 并回显在同一个 PHP 页面中与按钮答案

【问题标题】：Clicking a button to run casperJS in PHP and echo results in same PHP page with button单击一个按钮以在 PHP 中运行 casperJS 并回显在同一个 PHP 页面中与按钮
【发布时间】：2014-09-11 10:48:37
【问题描述】：

我有一个 casperJS 脚本，它使用提供的凭据登录多个用户；它返回成功和失败的登录次数以及成功和失败的用户名。我试图通过单击 PHP 页面中的按钮来运行此脚本，并且在 casperJS 运行后，我希望将结果回显到单击按钮的同一页面（无需重新加载页面）。我查看并查看了以下 Q/A，但这些都没有为我的问题提供足够的答案（因为脚本结束后不会显示结果）：click on the button to run php code and echo result、Run/Execute CasperJS script by clicking a button on webpage、CasperJS passing data back to PHP。

我当前的网络服务器设置：

PhantomJS 版本：1.9.7
CasperJS 版本：1.1.0-beta3
Apache/2.2.27 (Unix) mod_ssl/2.2.27 OpenSSL/1.0.1h DAV/2 PHP/5.5.14
在 OS X 10.9.3 上

我的 casperJS 脚本：gist

我首先在 PHP 页面上调用了 casperJS 脚本（但这显然导致脚本先运行，然后页面加载），使用这个（来自How to run casperJS script from php API）：

echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js");

页面加载后，它会回显运行脚本的部分结果。我不确定为什么它只选择回显最后一个 this.echo(JSON.stringify(tracker));。我显然希望它打印脚本中的所有回声，但这可能是另一个问题；我也想为回声着色。此外，屏幕截图也没有发生。

现在我实际上有一个按钮，当我按下它时，只要 casperJS 脚本正在运行，它就会保持按下状态，一旦完成它就会变为未按下状态，但我没有任何结果回显。我无法知道脚本是否运行，因为屏幕截图没有出现，尽管按钮保持按下的时间长度让我相信它已被执行。这是我的 PHP 页面：

<html>
<head>
<title>casperJS testing</title>
</head>
<body>
    <center>
<p>Welcome to the casperJS Automated Testing Utility</p>
<br>
<input type="button" name="runcasperjs"  onclick="casperjs()"><div id="results">Waiting for echoes</>
<br>
<?php
    ## This Function Below Sets PhantomJs So CasperJS Can Use It
    putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
    echo "Running PhantomJS version: ";
    echo exec('/usr/local/bin/phantomjs --version 2>&1');
    echo "<br />";
    echo "Running CasperJS version: ";
    echo exec('/usr/local/bin/casperjs --version 2>&1');
    echo "<br />";
    echo 'Current PHP version: ' . phpversion();
    echo "<br />";
    $version = apache_get_version();
    echo "$version\n";
?>
    </center>
    <script>  
     function casperjs(){
       var xhReq = new XMLHttpRequest();
       var request = "http://pathToLocalHost/phpTest.php" // this will prepare a request to your server
       xhReq.open("GET", request, false);  // send a request
       xhReq.send(null);
       document.getElementsByID("results").innerHTML=xhReq.responseText  /// this will display results

       }
    </script>
</body>
</html>

这是onclick激活的PHP页面phpTest.php：

<?php
echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js"); 
?>

也许我这样做完全错了，我不应该有另一个 PHP 页面，我不确定。我试图通过研究以前的 Q/As 来创建解决方案，但无法提出解决方案。谢谢！

【问题讨论】：

标签： javascript php ajax apache casperjs

【解决方案1】：

所以我想我可以使用 AJAX 在同一页面中显示 casperjs 回显结果。我制作了一个带有两个按钮的 HTML 页面：1) Run casperjs AJAX 来运行 AJAX，2) Run casperjs 来简单地加载执行 casperjs 脚本并打印的 PHP 页面结果在新页面中。这是 HTML（在 How to link external javascript file onclick of button 的帮助下点击 AJAX 按钮）：

<!DOCTYPE html>
<html>
    <head>
        <title>casperJS testing</title>
    </head>
    <center>
    <body>
    <div id="mainContent">
<p>Welcome to the Automated Testing Utility</p>
<table>
<tr>
  <td><button id="button_AJAX">Run casperjs AJAX</button></td>
  <td><form action="runscript.php">
    <input type="submit" value="Run casperJS">
</form></td> 
</tr>
</table>
    </div>
    <script type="text/javascript">
    var button = document.getElementById('button_AJAX');
    button.onclick = function(){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "casperjsajax.js"; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
    </script>
    </center>
    </body>
</html>

casperjsajax.js 代码（借助JS Essential Training）：

// 1: Create the request 
var myRequest;

// feature check!
if (window.XMLHttpRequest) {  // does it exist? we're in Firefox, Safari etc.
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // if not, we're in IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2: Create an event handler for request to call back
myRequest.onreadystatechange = function(){
    if (myRequest.readyState === 4) {
        var p = document.createElement("p");
        var t = document.createTextNode(myRequest.responseText);
        p.appendChild(t);
        document.getElementById("mainContent").appendChild(p);
    }
};

// Open and send it
myRequest.open('GET', 'scriptresults.php', true);
// any parameters?
myRequest.send(null);

scriptresults.php 代码：

<?php
echo "Here are your test results!";
echo "<br />";
echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js");
?>

以及非 AJAX 的 runscript.php 链接

<html>
<head>
<title>casperJS Test Results</title>
</head>
<body>
    <center>
<p>Here are your results!</p>
<br>
<?php
    echo exec("/usr/local/bin/casperjs /full/path/to/your_script.js");
?>
    </center>   
</body>
</html>

【讨论】：