div 태그에 UNIX 명령의 내용 추가하기

나는 학습을 위해 유닉스 웹 기반 터미널을 만들고있다. 지금까지 텍스트 상자를 만들고 출력이 표시됩니다. 이런 식으로.div 태그에 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>

하지만이 페이지가 정말 터미널 인 것처럼보고 싶다. 명령을 입력 할 때 셸 명령의 결과를 저장 한 다음 div 태그에 추가해야합니다. 따라서 명령을 입력 할 때 출력을 계속 표시합니다. 유닉스 터미널처럼.

div 태그에 명령의 출력을 어떻게 추가 할 수 있습니까?

출처

2011-04-12 user478636

당신이 바퀴를 다시 발명에 나가 건너 뛰는 생각 해 봤나? http://sourceforge.net/projects/phpterm/ – Treffynnon

명령을 서버로 어떻게 보냅니 까? 일반 POST/GET 또는 Javascript? – Yoshi

메인 포스트가 편집되었습니다 .......... – user478636

변화 :

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

하려면 다음과 같이 (!) 참고에

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

, 왜 잘 설립 자바 스크립트 프레임 워크 중 하나를 사용하지 않는?

예를 들어 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

고마워, 내가 일할거야 – user478636

div 태그에 UNIX 명령의 내용 추가하기

답변

관련 문제