如何将Java在线编译器的console.log输出展示到HTML页面？

嗨，这事儿其实很简单——你已经成功通过API获取到编译结果了，现在只需要把这些数据从控制台“搬”到页面上就行。我帮你修改了代码，具体步骤和完整代码如下：

步骤1：添加结果展示容器 #

首先在页面里加一个专门用来显示输出的区域，用<pre>标签最合适，因为它能保留文本里的换行和空格，完美适配编译输出的格式。我给它加了点基础样式，看起来更舒服。

步骤2：修改AJAX回调逻辑 #

在done回调里，不要再只打印到控制台，而是把返回的data对象里的各个字段（错误、警告、运行结果、统计信息）整理后插入到刚才的容器里。还要处理一下null的情况，避免页面显示奇怪的null字符。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Online Compile</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var to_compile = {
                    "LanguageChoice": "4",
                    "Program": $("#code").val(),
                    "Input": "",
                    "CompilerArgs" : ""
                };
                $.ajax ({
                    url: "https://rextester.com/rundotnet/api",
                    type: "POST",
                    data: to_compile
                }).done(function(data) {
                    // 整理输出内容
                    let outputContent = '';
                    
                    // 显示错误（如果有）
                    if (data.Errors) {
                        outputContent += '❌ Errors:\n' + data.Errors + '\n\n';
                    }
                    
                    // 显示警告（如果有）
                    if (data.Warnings) {
                        outputContent += '⚠️ Warnings:\n' + data.Warnings + '\n\n';
                    }
                    
                    // 显示运行结果
                    outputContent += '✅ Result:\n' + data.Result + '\n\n';
                    
                    // 显示统计信息
                    outputContent += '📊 Stats:\n' + data.Stats;
                    
                    // 把内容插入到页面的输出容器里
                    $("#output").text(outputContent);
                }).fail(function(data, err) {
                    alert("fail " + JSON.stringify(data) + " " + JSON.stringify(err));
                });
            });
        });
    </script>
</head>
<body>
    <textarea id="code" rows="20" cols="100">
class Rextester {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
    </textarea><br>
    <button id="run">Run</button> <br>
    <!-- 新增的结果展示容器 -->
    <pre id="output" style="background:#f5f5f5; padding:15px; border-radius:4px; border:1px solid #ddd; margin-top:10px; white-space:pre-wrap;"></pre>
</body>
</html>

代码说明 #

• 用<pre>标签保留输出的换行和格式，white-space:pre-wrap确保内容过长时自动换行
• 对Errors和Warnings做了非空判断，只有存在内容时才显示
• 用 emoji 区分不同类型的输出，让页面更直观
• 把整理好的内容通过text()方法插入到容器中，避免HTML注入问题

这样点击Run按钮后，编译结果就会直接显示在页面的输出区域里啦！

内容的提问来源于stack exchange，提问作者LoganPaul