Struts2中如何在文本框中回显数据库已保存的文本内容

你遇到的问题核心是点击modify按钮跳转编辑页时，后端没有将数据库中存储的对应文本值回传给前端渲染到输入框中，可按以下步骤修改：

• 第一步：调整modify按钮的跳转逻辑，跳转时携带待修改数据的唯一主键ID，示例跳转格式如下：
  http://你的域名/编辑页路由?dataId=对应数据的主键值
• 第二步：修改后端编辑页的请求处理逻辑，接收前端传过来的主键ID，查询数据库中对应记录的functionInfo.paramsText字段值，将该值存入请求上下文传递给前端模板。以SpringBoot+Thymeleaf为例：

  @GetMapping("/modifyPage")
  public String modifyPage(Long dataId, Model model) {
      // 查数据库获取对应记录
      FunctionInfo info = functionInfoMapper.selectById(dataId);
      // 将字段值存入model
      model.addAttribute("paramsText", info.getParamsText());
      return "编辑页模板名";
  }
  

• 第三步：修改前端input标签的代码，新增value属性绑定后端传递的文本值，不同模板引擎写法参考：
  • Thymeleaf模板写法：
    <input type="text" name="functionInfo.paramsText" th:value="${paramsText}"/>
  • JSP模板写法：
    <input type="text" name="functionInfo.paramsText" value="${functionInfo.paramsText}"/>
  • 纯HTML+AJAX场景：页面加载完成后调用接口查询对应文本值，再通过JS给输入框赋值：

    // 从URL中提取待修改数据的ID
    const dataId = new URLSearchParams(window.location.search).get('dataId');
    // 调用后端接口查询存储的文本内容
    fetch(`/getParamsText?dataId=${dataId}`)
      .then(res => res.text())
      .then(data => {
        document.querySelector('input[name="functionInfo.paramsText"]').value = data;
      })
    

该写法兼容新增和修改两个场景，新增时后端不传值或者传空字符串，输入框就默认空白，不需要单独写两套输入框代码。

注意：渲染value值时要对特殊字符（如双引号、尖括号）做转义处理，避免破坏HTML结构同时防范XSS攻击。

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