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

I'm making a UNIX web-based terminal for learning purposes. So far I have made a text box and the output is being displayed. Sort of like this.

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

Form

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

But I want it to look as if the page was really a terminal. When I type a command, it should store the result of the shell command, and then append it to a div tag. So as I am typing in commands, it will keep on showing the output. Just like in the UNIX terminal.

How can I append the output of the commands to a div tag?

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

dqyin0101 2011-04-12 11:07

关注

change:

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

to:

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

On a sidenote, why are you not using any of the well established javascript frameworks?

With jQuery for example you could reduce your code to maybe 4 lines.

Edit - using 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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?