zoukankan      html  css  js  c++  java
  • ajax将众多行数组转json传入html页面循环传入table中

    1. 存在问题:

    1)mysql数据库经过servlet层的Json转送至html页面会导致数据库的表头顺序混乱,不能以自己想要的顺序呈现在页面上;

    2)Servlet层收到的数据为List型数组,通过ajax接收会变成String类型,无法循环插入table中;

    2. 解决方案:

     第一个问题方案:

      当收到list型数据转为json形式

      不要采用:JSONArray.fromObject()函数转为json流。这样方式简单,但数据库的字段顺序会发生变化

    JSONArray jsonArray = new JSONArray();
    JSONArray.fromObject(jsonArray);

        具体采用:JSON.put(数据库字段名,getter方法)

    JSONArray jsonArray = new JSONArray();
            for(Pre_sensor Pre_dataDaoList:Pre_dataDaoLists){
                JSONObject jo = new JSONObject();
                jo.put("time", Pre_dataDaoList.getTime());
                jo.put("name", Pre_dataDaoList.getName());
                jo.put("num", Pre_dataDaoList.getNum());
                jo.put("set_temp", Pre_dataDaoList.getSet_temp());
                jo.put("set_pre", Pre_dataDaoList.getSet_pre());
                jo.put("collect_temp",Pre_dataDaoList.getCollect_temp());
                jo.put("collect_pre",Pre_dataDaoList.getCollect_pre());
                jo.put("measure_temp",Pre_dataDaoList.getMeasure_temp());
                jo.put("measure_pre",Pre_dataDaoList.getMeasure_pre());
                jo.put("temp_org",Pre_dataDaoList.getTemp_org());
                jo.put("pre_org",Pre_dataDaoList.getPre_org());
                jsonArray.add(jo);
            }

    第二个问题接解决方法:

      Servlet层得到的是List型数组,通过JSON转换,由ajax接收。接收到的data为var类型,是String类型,不能循环插入table中,所以,ajax得到的data需要经过eval()函数处理。

      

    $.ajax({ 
                    url : "http://localhost:8080/tianjin-ssms-meach/Pre_checkDataServlet", 
                    type : "post",
                    success : function(data2)
                    {    
                        var data = eval(data2); 
                        var pressureThead = "<tr><th>时间</th><th>编号</th><th>序号</th><th>标校温度</th><th>标校气压</th><th>采集温度</th><th>采集气压</th><th>初测温度</th><th>初测气压</th><th>温度原始值</th><th>气压原始值</th></tr>";
                        $("#originalDataInfoQueryTable thead").append(pressureThead); //写入表头                    
                         for(var i=0;i<data.length;i++){
                            var tbody;
                            tbody='<td>'+data[i].time+'</td>'+'<td>'+data[i].name+'</td>'+'<td>'+data[i].num+'</td>'+'<td>'+data[i].set_temp+'</td>'
                              +'<td>'+data[i].set_pre+'</td>'+'<td>'+data[i].collect_temp+'</td>'+'<td>'+data[i].collect_pre+'</td>'+'<td>'+data[i].measure_temp+'</td>'
                              +'<td>'+data[i].measure_pre+'</td>'+'<td>'+data[i].temp_org+'</td>'+'<td>'+data[i].pre_org+'</td>'                                          
                              $("#originalDataInfoQueryTable tbody").append('<tr>'+tbody+'<tr>');//写入表格数据    
                        }  
                    }
                });
  • 相关阅读:
    haffman树
    树状打印二叉树
    迷宫
    Linux(CentOS7)下安装RabbitMQ
    MySQL 5.6以上版本group by中的子查询失效
    Aop失效的场景以及解决办法
    关于Eureka服务端和客户端的一些相关配置说明
    Mybatis之通用mapper使用注解的方式写动态sql-小结
    MongoDB之源生基础概念与语句测试
    MongoDB的可视化工具(Studio 3T)的安装
  • 原文地址:https://www.cnblogs.com/lwcwj/p/12907131.html
Copyright © 2011-2022 走看看