將UNIX命令的內容追加到div標記

我正在爲學習目的製作一個基於UNIX的基於Web的終端。到目前爲止，我已經創建了一個文本框並顯示輸出。有點像這樣。將UNIX命令的內容追加到div標記

<?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標籤？

來源

2011-04-12 user478636

你有沒有考慮在重新發明輪子跳過了呢？ http://sourceforge.net/projects/phpterm/ – Treffynnon 2011-04-12 11:02:27

你如何將你的命令發送到服務器？普通的POST/GET或Javascript？ – Yoshi 2011-04-12 11:02:39

已編輯主文章.......... – user478636 2011-04-12 11:07:20

變化：

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>

來源

2011-04-12 11:07:55 Yoshi

我已經將它放在腳本標記中，但它不起作用。 btw我傳遞的參數是q，而不是p – user478636 2011-04-12 12:21:17

謝謝，我得到它的工作 – user478636 2011-04-12 12:41:17

將UNIX命令的內容追加到div標記

回答

相關問題