php javascript刷新页面

时间:2017-01-23 10:20:13

标签: javascript php

我有(工作):第一页 - 用户输入字符串并按下提交按钮。此参数通过会话发送到运行某种脚本命令的其他页面并显示结果(输出)。这里'代码使其更清晰:

第一页:

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

现在我想在一个页面中同时使用两个页面,即当页面打开时,输入字段和按钮将位于顶部,而在其下面则是第二页的命令输出,每个页面都刷新时间用户&#34;提交&#34;另一个输入(第一次userInput将为空)。希望它或多或少都清楚。有什么帮助吗?

1 个答案:

答案 0 :(得分: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
    }