EL表达式取Map,List值的总结

2 篇文章 0 订阅


EL表达式取Map中的值:

后台action 中:

 Map map = new HashMap();
 map.put(key1,value1);
 map.put(key2,value2);
 map.put(key3,value3);
前台jsp 中使用EL获取Map:

1 :  ${map[key1]}   ---- 直接取map中key=key1 的value;  例:  map .put("a","b"),  ${map["a"]}  就可以

注意:如果key1 是数值,例如; 1

后台 map.put(1, value1) , 前台 ${map[1]}将取不到值。原因:el表达式中数字1是Long类型,无法匹配后台map中的int。 修改 map.put(0L, value);  前台 :${map[1]}.


<forEachitems="${map}" var="item">
<c:outvalue="${item.key}"/>
<c:outvalue="${item.value}"/>
</forEach>


EL 表达式取List的值:

后台action :
  List list = new ArrayList(); 
           list.add("abc");
            list.add("123");
            list.add("haha");
            list.add("hehe");
前台jsp中:

${list[0]},         ${list[1]},          ${list[2]},          ${list[3]}


练习例子:

List<Map<String,Object>> students = new ArrayList<Map<String,Object>>(); 
        Map<String,Object> s1 = new HashMap<String,Object>(); 
        s1.put("name","jim"); 
        s1.put("age","15"); 
        students.add(s1); 
           Map<String,Object> s2 = new HashMap<String,Object>(); 
        s2.put("name","lucy"); 
        s2.put("age","12"); 
        students.add(s2); 


前台:

<c:forEach var="student" items="$ {students}" > 
          <tr> 
          	<td> <c:out value="$ {student.name}" default="wang"/> </td> 
         	<td> <c:out value="$ {student.age}" default="wang"/> </td> 
          </tr> 
 </c:forEach> 








  • 9
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
首先,需要在后端定义一个包含用户账号密码的列表,并将其传递给前端页面: ```python from flask import Flask, render_template app = Flask(__name__) # 定义一个用户列表,包含账号和密码 users = [{'username': 'user1', 'password': '123456'}, {'username': 'user2', 'password': '654321'}] @app.route('/users') def show_users(): return render_template('user_list.html', users=users) ``` 接下来,在前端页面中使用 EL 表达式展示用户列表,并添加全选和删除功能: ```html <!DOCTYPE html> <html> <head> <title>User List</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>User List</h1> <table> <tr> <th><input type="checkbox" id="select-all"></th> <th>Username</th> <th>Password</th> <th>Action</th> </tr> <tbody> <!-- 使用 EL 表达式展示用户列表 --> <c:forEach var="user" items="${users}"> <tr> <td><input type="checkbox" class="select-user" value="${user.username}"></td> <td>${user.username}</td> <td>${user.password}</td> <td><button class="delete-user" data-username="${user.username}">Delete</button></td> </tr> </c:forEach> </tbody> </table> <button id="delete-selected">Delete Selected</button> <script> // 全选/不全选 $('#select-all').click(function() { $('.select-user').prop('checked', $(this).prop('checked')); }); // 删除用户 $('.delete-user').click(function() { var username = $(this).data('username'); $.ajax({ url: '/delete_user', type: 'POST', data: {'username': username}, success: function(response) { if (response.success) { window.location.reload(); } else { alert(response.message); } }, error: function() { alert('Error deleting user.'); } }); }); // 删除选中的用户 $('#delete-selected').click(function() { var selectedUsers = $('.select-user:checked').map(function() { return $(this).val(); }).get(); if (selectedUsers.length === 0) { alert('Please select at least one user to delete.'); return; } if (!confirm('Are you sure you want to delete these users?')) { return; } $.ajax({ url: '/delete_users', type: 'POST', data: {'users': selectedUsers}, success: function(response) { if (response.success) { window.location.reload(); } else { alert(response.message); } }, error: function() { alert('Error deleting users.'); } }); }); </script> </body> </html> ``` 其中,EL 表达式使用 `${}` 包裹变量名,例如 `${users}` 表示传递给页面的用户列表。在页面中使用 `<c:forEach>` 标签遍历用户列表,并将每个用户的账号、密码、删除按钮展示出来。 添加了全选功能和删除功能。全选按钮使用 jQuery 选择器 `$('#select-all')` 获,点击后将所有选择用户的复选框的 `checked` 属性设置为全选按钮的 `checked` 属性。删除按钮使用 jQuery 选择器 `$('.delete-user')` 获,点击后使用 AJAX 发送 POST 请求到后端的 `/delete_user` 接口,并传递要删除的用户的账号。删除选中用户的按钮同理,首先获选中的用户的账号,然后使用 AJAX 发送 POST 请求到后端的 `/delete_users` 接口,并传递要删除的用户的账号列表。在 AJAX 请求成功后,重新加载页面以展示更新后的用户列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值