Question

我正在制作一个基于UNIX网络的终端，用于学习目的。到目前为止，我已经制作了一个文本框，正在显示输出。有点像这样。

<?php
$output = shell_exec('ls');
echo "<pre>$output</pre>";
?>

表格

<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function shell_execute(str)
{
if (str.length==0)
  {
  document.getElementById("txtOut").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtOut").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","exec.php?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body onLoad="setUser();">
    <div class="container">

    <h2>UNIX Web Based Terminal 1.0</h2>
        <br />
    <p><b>output</b></p>
<form>
<span id="User"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" />
</form>
<div class="output">
<p><span id="txtOut"></span></p>

    </div>
</div>
</body>
</html>

但我希望它看起来好像该页面真的是一个终端。当我键入命令时，它应该存储shell命令的结果，然后将其附加到div标记。因此，当我输入命令时，它将继续显示输出。就像在UNIX终端中一样。

如何将命令的输出附加到div标签？

Answer 1

变化：

document.getElementById("txtOut").innerHTML=xmlhttp.responseText;

为：

document.getElementById("txtOut").innerHTML += xmlhttp.responseText;

在旁注中，为什么不使用任何完善的javascript框架？

以jQuery为例，您可以将代码减少到4行。

编辑 - 使用jQuery： http://api.jquery.com/jQuery.ajax/

<html>
    <head>
        <link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#cmd').bind('keydown', function (evt) {
                    if (evt.keyCode === 13) { // enter key
                        var cmdStr = $(this).val();

                        $.ajax({
                            url: 'exec.php',
                            dataType: 'text',
                            data: {
                                q: cmdStr
                            },
                            success: function (response) {
                                $('#txtOut').append(response);
                            }
                        });
                    }
                });
            });
        </script>
    </head>

    <body>
        <div class="container">
            <h2>UNIX Web Based Terminal 1.0</h2>
            <br />
            <p><b>output</b></p>

            <span id="User"></span>
            <input id="cmd" type="text" class="textbox" size="20" />

            <div class="output">
                <p><span id="txtOut"></span></p>
            </div>
        </div>
    </body>
</html>

将UNIX命令的内容附加到div标记

1 个答案: