将UNIX命令的内容附加到div标记 [英] Appending the contents of a UNIX command to a div tag
问题描述
我正在为学习目的制作一个基于UNIX的基于终端的终端。到目前为止，我已经创建了一个文本框并显示输出。
<？php
$ output = shell_exec（'ls'）;
echo< pre> $ output< / pre>;
？>
表格
< html>
< head>
< link href =/ css / webterminal.css =stylesheettype =text / css/>
< script type =text / javascript>
函数shell_execute（str）
{
if（str.length == 0）
{
document.getElementById（txtOut）。innerHTML =;
return;
if（window.XMLHttpRequest）
{//代码为IE7 +，Firefox，Chrome，Opera，Safari
xmlhttp = new XMLHttpRequest（）;
}
else
{//代码为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终端1.0< / h2>
< br />
< p>< b>输出< / b>< / p>
< form>
< span id =User>< / span>< < input type =textclass =textboxonkeyup =shell_execute（this.value）size =20/>
< / form>
< div class =output>
< p>< span id =txtOut>< / span>< / p>
< / div>
< / div>
< / body>
< / html>
但我希望它看起来好像该页面确实是一个终端。当我键入命令时，它应该存储shell命令的结果，然后将其附加到div标记。所以当我输入命令时，它将继续显示输出。就像在UNIX终端中一样。
如何将命令的输出追加到div标记中？
更改：
document.getElementById（txtOut）。innerHTML = xmlhttp。 responseText的;
到：
document.getElementById（txtOut）。innerHTML + = xmlhttp.responseText;
在旁注中，您为什么不使用任何已建立的javascript框架？
以jQuery为例，您可以将代码减少到4行。
$ b
编辑 - 使用jQuery：
< a href =http://api.jquery.com/jQuery.ajax/ =nofollow> http://api.jquery.com/jQuery.ajax/
< html>
< head>
< link href =/ css / webterminal.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =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）输入密钥
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终端1.0< / h2>
< br />
< p>< b>输出< / b>< / p>
< span id =User>< / span>
< input id =cmdtype =textclass =textboxsize =20/>
< div class =output>
< p>< span id =txtOut>< / span>< / p>
< / div>
< / div>
< / body>
< / html>
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?
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>
这篇关于将UNIX命令的内容附加到div标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
