█ 【web学习之交互】 数据交互 - List传输

█ 【web学习之交互】 数据交互 - List传输

█ 相关文章：

-　
　●　【web学习之html】 HTML基础 - 常见语法总结
　●　【web学习之html】 HTML基础 - 表单学习
　●　【web学习之Js】 JavaScript基础 - 基础语法
　●　【web学习之demo】 一个Demo的解析
　●　【web学习之eclipse】 用eclipse从git(码云)上下载maven项目
　●　【【web学习之交互】 数据交互 - List传输

█ 读前说明：

-　
　●　本文通过学习别人写demo,学习一些课件,参考一些博客,’学习相关知识，如果涉及侵权请告知
　●　本文只简单罗列相关的代码实现过程
　●　涉及到的逻辑以及说明也只是简单介绍，主要当做笔记，了解过程而已

█ 本文知识点：

-　
　●　forEach 的使用
　●　$(’#selectStudent’).html(tr);局部更新
　●　JSONArray 的使用
　●　eval(data.msg);//字符串转换成js对象

█ 直接在嵌入在Html中显示：

-　
　●　在Controller的java文件中通过Model model/HttpServletRequest request/HttpSession session传递List对象：

   List< UserInfo> studentList =...;// 初始化 List对象
   request.setAttribute("studentList", studentList);// 通过setAttribute传递数据到前端

●　在前端的html文件中用过${studentList}获取对象：

   <select id="selectStudent">
   <option value="0">选择学生</option>
   <c:forEach items="${studentList}" var="keyword" varStatus="id">;// 通过${studentList}获取传递给keyword
      <option value="${keyword.id}">${keyword.name}</option>
   </c:forEach>
   </select>

●　最后展示的效果图：

█ 通过在js里面获取，再动态显示 ：

-　
　●　在Controller的java文件中直接传递List对象(方法1)：

   @ResponseBody
   @PostMapping(value = "getStudentList", produces = "application/json; charset=utf-8")
   public List< UserInfo> getStudentList(Model model) {
       List< UserInfo> items = new ArrayList<>();
       return items ;
   }

●　在Controller的java文件中将List对象转换成字符串(方法2)：

   @ResponseBody
   @PostMapping(value = "getStudentList", produces = "application/json; charset=utf-8")
   public List< UserInfo> getStudentList(Model model) {
       List< UserInfo> items = new ArrayList<>();
      JSONArray jsonArray=new JSONArray();
      for (UserInfo item : items ) {
       	jsonArray.add(items);  
      }
       return jsonArray.toString();
   }

●　在前端的html文件中js通过post返回获取对象(方法1)：

  $.post("../getStudentList",null, function(data) {
        var val=eval(data.msg);//字符串转换成js对象  
        var tr = '<option value="0">选择学生</option>';
        for (var i=0;i<val.length;i++){
             tr = tr + '<option value="'+val[i].id+'">'+val[i].name+'</option>';
        }
         $('#selectStudent').html(tr);
   });

PS1: console.log(data); 将输出: 　
[{“id”:1,“name”:“刘一”},{“id”:2,“name”:“陈二”},{“id”:3,“name”:“张三”},{“id”:4,“name”:“李四”},{“id”:5,“name”:“王五”},{“id”:6,“name”:“赵六”}]　
PS2: console.log(eval(data)[0].name); 将输出:刘一　
PS3: onsole.log(eval(data).length); 将输出:6　
PS4: 另外还有JSON.parse(data);可以将字符串转换成对象,只是字符串的格式不太一样

●　在前端的html文件中js通过post返回获取对象(方法2)：

  $.post("../getStudentList",null, function(data) {
        var tr = '<option value="0">选择学生</option>';
        for (var i=0;i<data.length;i++){
             tr = tr + '<option value="'+data[i].id+'">'+data[i].name+'</option>';
        }
         $('#selectStudent').html(tr);
  });

PS1: console.log(JSON.stringify(data)); 将输出:(同方法1的字符串)　
[{“id”:1,“name”:“刘一”},{“id”:2,“name”:“陈二”},{“id”:3,“name”:“张三”},{“id”:4,“name”:“李四”},{“id”:5,“name”:“王五”},{“id”:6,“name”:“赵六”}]
PS2: cnsole.log(data[0].name); 将输出:刘一　
PS3: cnsole.log(data.length); 将输出:6

█ 其他：

-　
　●　1.时间显示，可以直接在js里面将Date进行转换处理：，

 <fmt:formatDate value='${createtime}' pattern='yyyy-MM-dd/E HH:mm'/>

显示如下：

PS: 如果将HH:mm写成HH:MM则会将17:35显示为15:11，所以建议时间转换可以直接在服务端转换好，在前端直接显示即可　

█ 相关资料：

-　
　●　1.2018-01-28 SSM将后台获取的数据转换成json格式传递到前台页面 - Fantasy_99 - 博客园
　●　2.20161228 js获取springmvc后端传递过来的list对象，并使用select下拉框显示出来 - jaryle的专栏 - CSDN博客l
　●　3.2018-07-17 SSM框架动态表格实现批量新增 - Z_SUHE的博客 - CSDN博客
　●　4.2017-09-21 SSM之Mybatis查询以及批量操作 - 黄三yeah的Java技术空间 - CSDN博客
　●　5.Javascript 教程 - JavaScript JSON.parse() | 菜鸟教程
　
转载请注明出处：
https://blog.csdn.net/ljb568838953/article/details/84136816