0

我正在为我的服务器管理应用程序编写一个模拟终端网页。基本上，使用 jquery、ajax 和 php 的 shell_exec()，我正在模拟一个终端。

终端的输入行基本上只是一个input包裹在表单中的元素。有一个 jquery 处理程序在提交表单时触发 ajax 请求（按下回车键）。

当我第一次提交它时一切正常（当我发送第一个命令时）。但是，一旦我尝试发送第二个，页面一直滚动到顶部并且表单没有提交。

这是jQuery：

$("#terminal-form").unbind('submit').submit(function() {
            var current_dir = $("#path").text();
            var command = $("#terminal-input").val();
            $.ajax({
                url: "terminal.php",
                type: "post",
                data: { current_dir: current_dir, command: command },
                dataType: 'json',
                success: function(data) {
                    $("#terminal table").remove();
                    $("#terminal").append("root@gallactica:" + current_dir + " $ " + command + "<br>");
                    if (data['output'] != '') {
                        $("#terminal").append(data['output'] + "<br>");
                    }
                    $("#terminal").append("<table class='terminal-content'><tr><td nowrap='nowrap' style='overflow:auto;whitespace:nowrap'>root@gallactica:" + data['wd'] + "$<td style='width:99%'><form style='margin:0px;padding:0px' id='terminal-form'><input id='terminal-input' type='text'></input></form></td></tr></table>");
                    $("#terminal-input").focus();
                }
            })
            return false;
        })

处理程序基本上只是删除旧success表单并以纯文本形式插入结果，基本上给人一种它都是交互式的错觉。

这是 PHP 后端：

<?php

$current_dir = $_POST['current_dir']; // get current directory
$command = $_POST['command']; // get the command to run
chdir($current_dir); // change into the right directory

if (substr($command, 0, 2) == "cd") {
    chdir(substr($command, 3));
    $output = "";
} else {
    $output = shell_exec($command); // get the command's output
}

$wd = shell_exec('pwd'); // get the current working directory
$result = array('wd' => $wd, 'output' => $output); // create array
$result = json_encode($result); // convert to json for jquery
echo $result;

问题是当我去提交第二个命令时。我什至认为表单提交不正确。我做了一些谷歌搜索，发现您需要取消绑定处理程序，我正在这样做，但它仍然无法正常工作。

4

1 回答 1

4

一旦你替换了一个元素，你就会失去它的事件处理程序，即使你用完全相同的 html 替换。您看到的是默认浏览器方法提交的表单，这导致页面重新加载

为了解决这个问题，您可以委托提交处理程序，以便将来加载的表单也可以使用

$(document).on('submit', "#terminal-form",function() {
   /* handler code*/
})

这会将处理程序绑定到document始终存在的处理程序，并且仅针对您的特定表单的 ID。不会干扰页面中的任何其他表单提交处理程序

于 2012-12-29T02:47:39.680 回答