使用Ajax從實時PHP和Python輸出更新頁面內容

Question

長期用戶，第一次提問。 我從社區學到了很多，我喜歡這個網站。

所以這就是我正在拍攝的東西。 我希望有一個在后端運行ping命令的Web界面。 理想情況下，我希望網站具有允許您輸入IP地址或域的文本輸入，運行該命令的按鈕以及從PHP運行以實際運行ping命令的python腳本。 棘手的部分是將輸出打印到網站上，因為它是在命令行輸出的。 我想以這種方式做到這一點，作為一種未來證明概念的方法，並最終使用不同的iperf參數。

我構建了一個“技術上”完成工作的小PHP頁面，但我無法弄清楚如何在單擊按鈕時調用PHP腳本。 因為它是一個PHP頁面，所以只要加載頁面就會運行它。 經過一些研究，我認為ajax jquery是我正在尋找的。 我花了大約2天的時間嘗試不同的東西讓我非常接近，但似乎我在我的解決方案中跳舞。

根據我對ajax的了解，我基本上需要一個運行ajax函數的按鈕，該函數鏈接到我正在運行的php腳本。 我可以讓它運行腳本，但我不能讓它以實時/連續的方式更新頁面內容。 僅在命令運行完畢時。

這是我的php頁面，它完成了它需要做的事情，但每次加載/重新加載頁面時都會這樣做。 不理想。 我希望腳本只在按下按鈕時運行。

liveping.php：

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action="liveping.php" id="ping" method="post" name="ping"> Domain/IP Address: <input name="domain" type="text"> <input name="ping" type="submit" value="Ping"> </form><?php if (isset($_POST['ping'])) { function liveExecuteCommand($cmd) { while (@ ob_end_flush()); // end all output buffers if any $proc = popen("$cmd 2>&1", 'r'); $live_output = ""; $complete_output = ""; while (!feof($proc)) { $live_output = fread($proc, 4096); $complete_output = $complete_output . $live_output; echo "<pre>$live_output</pre>"; @ flush(); } pclose($proc); } } $domain = $_POST['domain']; $pingCmd = "python /var/www/html/ping.py ".$domain; if (isset($_POST['ping'])) { liveExecuteCommand($pingCmd); } ?> </body> </html>

ping.py：

 #!/usr/bin/python import cgi import os import sys ping = "ping -c 5 -W 2 "+sys.argv[1] os.system(ping)

我試過的一些事情：

 <html> <head> <script> var ajax = new XMLHttpRequest(); ajax.onreadystatechange = setInterval(function() { if (ajax.readyState == 4) { document.getElementById('content').innerHTML = ajax.responseText; } },100); function updateText() { ajax.open('GET', 'ajax.php'); ajax.send(); } </script> </head> <body> <button onclick="updateText()">Click Me</button> <div id="content">Nothing here yet.</div> </body> </html>

要么

 <!DOCTYPE html> <html> <body> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> var auto_refresh = setInterval( function () { $('#load_tweets').load('ajax.php').fadeIn("slow"); }, 1000); // refresh every 10000 milliseconds </script> </head> <div id="load_tweets"> </div> </body> </html>

用ajax.php

 <?php while (@ ob_end_flush()); // end all output buffers if any $proc = popen("ping -c 5 -W 2 google.com", 'r'); $live_output = ""; $complete_output = ""; while (!feof($proc)) { $live_output = fread($proc, 4096); $complete_output = $complete_output . $live_output; echo "<pre>$live_output</pre>"; @ flush(); } pclose($proc); ?>

謝謝你的幫助！

Answer 1

你不需要python來顯示ping結果。 只需兩個PHP文件即可。

index.php將具有AJAX功能以及表單。
ajax.php將擁有ping指定域名的代碼。

我擔心使用jQuery你可能無法捕獲實時源。 因為它沒有任何onreadystatechange 。 因此，在這種情況下，您可能需要使用vanilla JavaScript。 這是一個工作示范：

index.php文件：

<!DOCTYPE html>
<html>
<head>
    <title>Ping AJAX</title>
</head>
<body>
    <div>
        Domain/IP Address: <input id="domain" type="text"> 
        <input id="ping" type="button" value="Ping">
    </div>
    <div id="result"></div>
    <script>
        function updateText(domain) {
            var ajax = new XMLHttpRequest();
              ajax.onreadystatechange = function() {
                if (this.readyState == 3) {
                  var old_value = document.getElementById("result").innerHTML; 
                  document.getElementById("result").innerHTML = this.responseText;
                }               
            };          
            var url = 'ajax.php?domain='+domain;
            ajax.open('GET', url,true);
            ajax.send();
        }
        document.getElementById("ping").onclick = function(){
            domain = document.getElementById("domain").value;
            updateText(domain);
        }
    </script>
</body>
</html>

ajax.php：

<?php
if (isset($_GET['domain'])) {
    function liveExecuteCommand($cmd)
    {
        while (@ ob_end_flush()); // end all output buffers if any

        $proc = popen($cmd, 'r');

        $live_output     = "";
        $complete_output = "";

        while (!feof($proc))
        {
            $live_output     = fread($proc, 4096);
            $complete_output = $complete_output . $live_output;
            echo "<pre>$live_output</pre>";
            @ flush();
        }

        pclose($proc);
    }   
    $domain =  $_GET['domain'];
    $pingCmd = "ping ".$domain;
    liveExecuteCommand($pingCmd);
}
else{
    echo "No post request";
}
?>

輸出：

Declaimer：

ping命令已更改，因為我當前正在使用Windows操作系統。 根據您的操作系統更新它。

作為第一次提問者，您已經整齊地描述了問題並且也展示了您為解決問題所做的努力。 對此，我真的非常感激。

Answer 2

ajax.readyState == 4

本質上意味着，另一邊的腳本已經完成... 3是部分的。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

Answer 3

您只需將所有ajax腳本放入該函數中即可

例：

function updateText() {
        $.ajax({
          type: 'GET', // can be POST, too
          url: "ajax.php",
          crossDomain: true,
          data: {
                firstvar: firstvar,
                secondvar: secondvar
            },
          cache: false,
          success: function(data) {

            if($.trim(data) == "false") {
                alert("Fail to recived data");
            }
            else {
                // Success getting data
                // Do some jobs
            }

          }
        });
    }

如果你想取消提交不refesh，你可以使用

return false; // At the end of the function above

希望能幫助到你。

使用Ajax從實時PHP和Python輸出更新頁面內容

問題描述

3 個解決方案

解決方案1
2 已采納 2017-09-12 21:32:54

解決方案2
1 2017-09-12 20:03:42

解決方案3
1 2017-09-12 20:05:47

使用Ajax從實時PHP和Python輸出更新頁面內容

問題描述

3 個解決方案

解決方案1 2 已采納 2017-09-12 21:32:54

解決方案2 1 2017-09-12 20:03:42

解決方案3 1 2017-09-12 20:05:47

解決方案1
2 已采納 2017-09-12 21:32:54

解決方案2
1 2017-09-12 20:03:42

解決方案3
1 2017-09-12 20:05:47