javascript - php javascript 刷新页面

Question

我有(工作):第一页 - 用户输入字符串并按提交按钮。该参数通过 session 发送到另一个页面，该页面运行某种脚本命令并显示结果(输出)。这是让它更清楚的代码:

首页:

<?php
    session_start();
    echo "<input type=\"text\" id=\"userInput\">";
    echo "<br><button onclick=\"submit()\">Submit</button>";
    $_SESSION[''] = $input;
?>

<script type="text/javascript">
    var submit = function() {
        input = document.getElementById("userInput").value;
        window.open ('secondPage.php?userInput=' + input,'_self',false);}
</script>

第二页:

<?php
    session_start();
    $input = $_GET['userInput'];
    $command = "./myScript.py $input";
    system($command, $retval);
?>

现在我想将两者都放在一个页面中，即当页面打开时，输入字段和按钮将位于顶部，而其下方将是第二页命令的输出，每次用户都会刷新“提交”另一个输入(第一次 userInput 将为空)。希望它或多或少是清楚的。有什么帮助吗？

Answer 1

我想这就是您所需要的:

<?php
    session_start();

    // We check if there's POST data 'userInput'
    if (isset($_POST['userInput'])) {
        // 'userIput' exists, we make our process and return what we need.
        echo 'User inputed '.$_POST['userInput']."<br>";
    } else {
        // 'userIput' does not exists, displaying page content.
        ?>
        <input id="userInput" type="text" /><button id="btn">Send</button>
        <div id="result">
            <!-- Displaying AJAX results here -->
        </div>
        <script type="text/javascript">

            // Send an XMLHttpRequest
            function sendRequest(url, postData, callback) {
                var req = new XMLHttpRequest();
                if (!req)
                    return;
                var method = (postData) ? "POST" : "GET";
                req.open(method,url,true);
                if (postData)
                    req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                req.onreadystatechange = function () {
                    if (req.readyState != 4)
                        return;
                    if (req.status != 200 && req.status != 304) {
                        return;
                    }
                    callback(req);
                }
                if (req.readyState == 4)
                    return;
                req.send(postData);
            }

            // We bind the 'click' event on the button
            document.getElementById("btn").addEventListener('click', function(e) {
                var input = document.getElementById("userInput").value;
                // Use AJAX
                sendRequest("#", 'userInput='+input, function(data) {
                    // Data returned, inserting in our 'result' div.
                    var resDiv = document.getElementById("result");
                    resDiv.innerHTML = resDiv.innerHTML + data.responseText;
                });
            });
        </script>

        <?php
    }