Struts 1表单创建及JavaScript交互相关技术问题咨询

一、Struts 1 表单创建核心标签 #

Struts 1 依赖自带的<html:form>标签构建表单，配合<html:text>、<html:select>、<html:radio>等控件标签实现与ActionForm的绑定，标签的property属性需严格对应ActionForm类中的字段（要匹配getter/setter方法）。

示例代码：

<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>

<!-- action属性对应struts-config.xml中配置的Action路径 -->
<html:form action="/userSubmit" method="post" styleId="userForm">
  <!-- 文本框，绑定ActionForm的username字段 -->
  <html:text property="username" styleId="usernameInput" />
  
  <!-- 下拉选择框，绑定ActionForm的gender字段 -->
  <html:select property="gender">
    <html:option value="male">男</html:option>
    <html:option value="female">女</html:option>
  </html:select>
  
  <!-- 自定义按钮，触发JS提交逻辑 -->
  <input type="button" value="提交表单" onclick="handleSubmit()" />
</html:form>

二、JavaScript捕获表单值并提交至Action #

Struts表单标签生成的DOM元素，会自动使用property属性值作为元素的name属性，因此可以直接通过表单对象或DOM选择器获取值，再调用表单提交方法。

示例代码：

function handleSubmit() {
  // 获取表单对象
  const form = document.getElementById("userForm");
  
  // 捕获单个控件的值
  const username = document.getElementById("usernameInput").value;
  const gender = form.gender.value;
  
  // 可选：值校验逻辑
  if (!username.trim()) {
    alert("请输入用户名");
    return;
  }
  
  // 提交表单到配置的Action
  form.submit();
  
  // 若需动态修改提交目标Action，可直接修改form的action属性
  // form.action = "/anotherAction.do";
}

三、JavaScript更新Struts表单标签的值 #

Struts表单标签本质是生成标准HTML控件，因此可以通过JS直接修改控件的value属性或选中状态，无需特殊语法。

不同控件的更新示例： #

1. 文本/密码框

// 更新<html:text property="username">的值
document.getElementById("usernameInput").value = "new_test_user";

2. 下拉选择框

// 选中<html:select property="gender">中value为female的选项
document.getElementById("userForm").gender.value = "female";

3. 单选按钮组
   假设单选标签定义：

<html:radio property="status" value="active">激活</html:radio>
<html:radio property="status" value="inactive">禁用</html:radio>

JS更新逻辑：

const radios = document.getElementsByName("status");
for (const radio of radios) {
  if (radio.value === "active") {
    radio.checked = true;
    break;
  }
}

4. 复选框
   假设复选框定义：

<html:checkbox property="hobbies" value="reading">阅读</html:checkbox>
<html:checkbox property="hobbies" value="sports">运动</html:checkbox>

JS设置选中状态：

document.querySelector('input[name="hobbies"][value="reading"]').checked = true;

关键注意事项 #

• 所有Struts表单控件标签必须放在<html:form>内部，否则无法完成与ActionForm的绑定。
• property属性必须与ActionForm类中的字段名完全一致（大小写敏感），否则Action无法接收提交的值。
• 如需精准定位DOM元素，推荐给Struts标签添加styleId属性，通过getElementById获取元素更可靠。

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