php javascript刷新页面

Question

I have (working): first page - user inputs the string and presses submit button. This parameter, via session is sent to the other page which runs some kind of script command and shows the result (output). Here' the code to make it more clear:

First page:

<?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>

Second page:

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

Now I'd like to have both in one single page, ie when the page opens, the input field and button would be on top and under it would be the output of the command of the second page, refreshed each time user "submits" another input (first time the userInput would be empty). Hope it's clear, more or less. Any help?

Answer 1

I guess this is what you need :

<?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
    }