0

サーバー管理アプリケーション用の模擬端末 Web ページを作成しようとしています。基本的に、jquery、ajax、php の shell_exec() を使用して、ターミナルをエミュレートしています。

端末の入力行は、基本的にinputフォームにラップされた単なる要素です。フォームが送信されたとき (Enter キーが押されたとき) に ajax リクエストを起動する jquery ハンドラーがあります。

初めて送信するとき（最初のコマンドを送信するとき）にすべてが機能します。ただし、2 番目のものを送信しようとすると、ページが一番上までスクロールし、フォームが送信されません。

ここに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;

問題は、2 番目のコマンドを送信するときです。フォームが正しく送信されているとは思いません。私はいくつかのグーグルを行い、ハンドラーのバインドを解除する必要があることがわかりました。これは私が行っていますが、まだ機能していません。

4

1 に答える 1

4

要素を置き換えるとすぐに、まったく同じ html に置き換えたとしても、そのイベント ハンドラーが失われます。あなたが見ているのは、ページのリロードを引き起こしているデフォルトのブラウザメソッドによってフォームが送信されていることです

これを回避するには、送信ハンドラーを委任して、将来のフォームのロードでも機能するようにします。

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

これにより、ハンドラーがdocument常に存在する にバインドされ、特定のフォームの ID のみがターゲットになります。ページ内の他のフォーム送信ハンドラーに干渉しません

于 2012-12-29T02:47:39.680 に答える