天天看点

表单数据回显

一. 概念:

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

二. 意义:

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

三. 回显方法:

  1. 默认情况

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

  ** 实验:

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

  

表单数据回显

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

// 商品信息修改页面的展示
    @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";
    }      

   页面获取数据的形式

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>      

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

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

表单数据回显

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

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

Handler代码:

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 }      

jsp代码:

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>      

运行:

表单数据回显

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

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

表单数据回显

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

表单数据回显
表单数据回显

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

 总结数据回显的方法:

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

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