Java Web编程竞赛平台：HTML元素值如何传入Java类方法

你遇到的核心问题是客户端JavaScript代码和服务器端Java代码的执行时机不匹配：

• 服务器端的Java代码（也就是你写在<% %>里的内容）是在页面渲染阶段就执行完毕的，此时客户端的JS还没开始运行，自然拿不到lang、btn这些JS变量的值；
• 而JS代码是页面加载完成后在浏览器里运行的，这时候服务器端的代码早就执行完了，没法直接把JS变量传给已经执行过的Java代码。

下面提供两种常用的实现方式，你可以根据需求选择：

方式一：表单同步提交（简单直观，适合基础场景） #

这种方式是把页面上的输入元素放到<form>里，点击按钮时提交表单到后端的Servlet（或处理请求的JSP），在后端获取参数后调用Compile类。

1. 修改JSP页面代码 #

<form action="CompileServlet" method="post">
    <select name="lang" id="slct">
        <option value="c">C</option>
        <option value="cpp">C++</option>
    </select>
    <textarea name="code" id="cd" rows="10" cols="50"></textarea>
    <!-- 用隐藏域传递按钮动作标识 -->
    <input type="hidden" name="btnAction" value="compile">
    <input type="submit" name="sbt" value="编译/提交">
</form>

2. 创建CompileServlet处理请求 #

@WebServlet("/CompileServlet")
public class CompileServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置编码避免乱码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        
        // 获取表单提交的参数
        String lang = request.getParameter("lang");
        String code = request.getParameter("code");
        String btn = request.getParameter("btnAction");
        
        // 补充你的业务参数（比如questag、pool、clg，根据实际场景从session/DB获取）
        String questag = "your_questag_value";
        String pool = "your_pool_value";
        String clg = "your_clg_value";
        
        // 实例化Compile并执行编译逻辑
        Compile c = new Compile(questag, pool, lang, clg, code, btn);
        CompileResult result = c.compi(); // 假设compi()返回封装结果的对象
        System.out.println(result.getExpOut());
        
        // 把结果转发回页面展示（可选）
        request.setAttribute("compileOutput", result.getExpOut());
        request.getRequestDispatcher("/code.jsp").forward(request, response);
    }
}

方式二：AJAX异步提交（推荐，页面无刷新） #

如果希望点击按钮后页面不刷新，直接获取编译结果，可以用AJAX发送异步请求。

1. 修改JSP的按钮事件 #

<select id="slct">
    <option value="c">C</option>
    <option value="cpp">C++</option>
</select>
<textarea id="cd" rows="10" cols="50"></textarea>
<button id="compileBtn">编译/提交</button>
<div id="resultArea"></div> <!-- 用来展示编译结果 -->

<script>
document.getElementById("compileBtn").addEventListener("click", function() {
    // 获取页面输入值
    const sel = document.getElementById("slct");
    const lang = sel.options[sel.selectedIndex].value;
    const code = document.getElementById("cd").value;
    const btn = "compile"; // 按钮动作标识
    
    // 发送AJAX请求
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "CompileServlet", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 获取后端返回的结果并展示
            const output = xhr.responseText;
            document.getElementById("resultArea").textContent = "编译输出：" + output;
        }
    };
    
    // 构造编码后的请求参数，避免特殊字符乱码
    const params = `lang=${encodeURIComponent(lang)}&code=${encodeURIComponent(code)}&btnAction=${encodeURIComponent(btn)}`;
    xhr.send(params);
});
</script>

2. 调整CompileServlet的响应逻辑 #

在doPost方法最后，直接把编译结果返回给前端：

// ...前面的参数获取、Compile实例化代码...
String output = result.getExpOut();
response.getWriter().write(output);

• 不要在JSP脚本块（<% %>）里直接混合客户端JS代码，两者运行环境完全分离；
• 传递参数时务必处理编码问题，避免中文或特殊字符乱码；
• Compile类的业务逻辑应该放在后端（Servlet/Service层），不要写在JSP里，遵循MVC分层原则；
• 语言选择下拉框建议用value属性存储标准化标识（如c/cpp），而非text，后端处理更可靠。

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