表单数据回显

原创

TwcatL_tree 2022-10-19 22:54:54 博主文章分类：JAVA_Web ©著作权

文章标签 数据数据回显取值 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者TwcatL_tree的原创作品，请联系作者获取转载授权，否则将追究法律责任

一. 概念:

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

二. 意义:

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

三. 回显方法:

　　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的首字母小写, 当商品名称填写出错时

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

表单数据回显_取值_02

　　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>