ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ajax将众多行数组转json传入html页面循环传入table中

2020-05-17 21:56:00  阅读:330  来源: 互联网

标签:Pre dataDaoList temp 传入 ajax json jo put data


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>');//写入表格数据    
                    }  
                }
            });

 

标签:Pre,dataDaoList,temp,传入,ajax,json,jo,put,data
来源: https://www.cnblogs.com/lwcwj/p/12907131.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有