表单数据回显

怼烎@ 2023-10-06 11:56 9阅读 0赞

**一. 概念:**

在数据提交出现错误的时候, 已填写的信息仍在文本框中, 比如用户登录, 当用户输入错误的密码之后, 用户名仍在文本框, 只是密码框清空

**二. 意义:**

对于一些要填写很多信息的表单, 如果因为一些错误导致已经填写的整个表单信息重新填写, 对于用户非常地不友好

**三. 回显方法:**

**　　1. 默认情况**

POJO数据传入controller方法后, springMvc自动将POJO数据放到request域, key等于POJO类的首字母小写

\*\* 实验:

(1) 在商品名称填错的情况下, 点击"提交"按钮, 其他数据仍在\[注意, POJO类:ItemsCustom, 在jsp页面取值形式:value="$\{ itemsCustom.name \}"\]

![1108208-20170323113615127-875955108.png][]

(2) 修改Handler的响应POJO类的key\[属性\]

![复制代码][Image 1]

// 商品信息修改页面的展示
        @RequestMapping("/editItems")
        public String editItems(Model model, Integer id) throws Exception {
            // 根据id获取商品信息
            ItemsCustom itemsCustom = itemsService.findItemsById(id);
            model.addAttribute("items", itemsCustom);　　// 改之前是itemsCustom
            return "items/editItems";
        }

![复制代码][Image 1]

页面获取数据的形式

![复制代码][Image 1]

1 <table border="1" cellpadding="5" cellspacing="1" style="width: 30%">
     2             <tr>
     3                 <td>商品名称</td>
     4                 <td>
     5                     <input type="text" name="name" value="${items.name }"/>
     6                 </td>
     7             </tr>
     8             <tr><td>商品价格</td><td><input type="text" name="price" value="${items.price }"/></td></tr>
     9             <tr><td>生产日期</td>
    10                 <td>
    11                     <input type="text" name="createtime" value='<fmt:formatDate value="${items.createtime }" pattern="yyyy-MM-dd HH:mm:ss"/>' 
    12                             class="laydate-icon" οnclick="laydate()"/>
    13                 </td>
    14             </tr>
    15             <tr><td>商品描述</td><td><textarea rows="3" cols="40" name="detail">${items.detail }</textarea></td></tr>
    16         </table>

![复制代码][Image 1]

在这种情况下, Handler可以正常向jsp页面响应数据, 但是由于传递的key值是items, 不等于POJO类ItemsCustom的首字母小写, 当商品名称填写出错时

无法进行数据回显, 数据全部消失, 需要重新填写, 如下:

![1108208-20170323114052736-1205851991.png][]

**　2. 非默认情况下的数据回显解决方法**

**　　插入一个知识点: @ModelAttribute这个注解还可以将方法的返回值响应到页面**

Handler代码:

![复制代码][Image 1]

1 // 模拟@ModelAttribute注解将方法的返回值响应到页面的试验[静态数据]
     2     @ModelAttribute("itemsTypes")
     3     public Map<String, String> getItemsTypes() {
     4         Map<String, String> itemsTypes = new HashMap<String, String>();
     5         // 静态数据, 开发中要去数据库获取
     6         itemsTypes.put("101", "数码");
     7         itemsTypes.put("102", "母婴");
     8         itemsTypes.put("103", "家电"); 9 return itemsTypes; 10 }

![复制代码][Image 1]

jsp代码:

![复制代码][Image 1]

1 <td style="width: 190px"> 商品类型: 
    2   <select name="types" style="width: 100px">
    3       <c:forEach items="${
        itemsTypes }" var="type">
    4          <option value="${type.key }">${type.value }</option>
    5       </c:forEach>
    6   </select>
    7 </td>

![复制代码][Image 1]

运行:

![1108208-20170323121302861-909976497.png][]

因此, 做一个实验: 注明(静态数据)

在"提交"按钮对应的Handler方法中, 添加注解**@ModelAttribute("items")**, 里面的key值, 刚好是jsp页面用于取值的key, 这时候可以进行数据回显

![1108208-20170323115300643-1478679836.png][]

**除此之外, 对于数据回显, 还有比添加@ModelAttribute注解方法更简单的方法, 那就是: 直接将要回显的数据放入Model中**

![1108208-20170323122312643-1443374852.png][]

![1108208-20170323122115236-2068976139.png][]

但是对于简单类型的属性, springMvc不支持回显, 只能通过Model方法实现: model.addAttribute("id", id);

**总结数据回显的方法:**

1. 使用springMvc默认的方法, 保持jsp中取值的key和POJO类名的首字母小写一致;

2. 使用@ModelAttribute注解, jsp中取值的key和POJO类名的首字母小写可以不一致;

3. 使用Model, 直接将数据放入Model对象中

[1108208-20170323113615127-875955108.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323113615127-875955108.png
[Image 1]: 
[1108208-20170323114052736-1205851991.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323114052736-1205851991.png
[1108208-20170323121302861-909976497.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323121302861-909976497.png
[1108208-20170323115300643-1478679836.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323115300643-1478679836.png
[1108208-20170323122312643-1443374852.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323122312643-1443374852.png
[1108208-20170323122115236-2068976139.png]: https://images2015.cnblogs.com/blog/1108208/201703/1108208-20170323122115236-2068976139.png