后台拼接html代码在不同浏览器下显示的问题

         最近在一个项目中需要实现一个功能，把后台拼接好的html代码输出到前台，显示出拼接好的html表格样式。我用的是win7系统IE11运行正常，但是客户使用的是XP系统+IE8以及360浏览器，页面都显示出html源代码，分析后发现问题出在浏览器对AJAX提交后返回值的处理上，IE8直接把<,>显示成转义字符导致问题发生，而IE11原样输出，所以显示是正常的。前台代码如下：

<pre class="javascript" name="code">new biz.ajaxsubmit({    id : "#performancePayForm",    url : "<c:url value='/performancePay/uploadFile'/>",    dataType : "json",    success : function(data, textStatus, jqXHR) {        $("#specialGradeItem").html(data);    },    error : biz.utils.loadError    }); 

问题就出在返回的data中。开始觉得是jquery的html()方法对IE8以下的版本不支持导致，但是在IE9下运行问题依旧，因此排除jquery的问题。然后又尝试修改dataType返回值的类型为“html”，也不起作用。无奈之下转变思路，把后台拼接html的过程放在前台完成，后台只负责把处理结果转换为json格式输出到前端。后台controller代码如下：

/** * <p>导入excel</p> * @param datafile * @throws IOException */public void uploadFile(File datafile,PerformancePay performancePay) throws IOException{StringBuilder sb=new StringBuilder();List<PerformacePayDetail> performanceDetailList = performancePayService.generateEppdTableContent_1(ExcelUtil.readExcelDate(datafile),performancePay);String jxgzStr = PageUtil.toJson4JqGrid(performanceDetailList, true); //绩效综合、上月余额、本月发放、本月余额行         double lastMonthBalance = 0.0;        if(performancePayService.searchLmBalance() != null){        lastMonthBalance = ExcelUtil.nullToZero(performancePayService.searchLmBalance().getPpBalance());//查询上月余额        }        String newjxgzStr = "";         newjxgzStr = jxgzStr.substring(0,jxgzStr.length()-1);        sb.append(",");        sb.append("\"syye\":\""+lastMonthBalance+"\"}");this.print(newjxgzStr + sb.toString()); }

前台拼接html代码的方法如下：

//创建表格    function createPlanTable(dataList,lmb){    var tbody = $("#specialGradeItem");    var gdjxgz = 0;    tbody.html("");    $.each(dataList,function(i,eppd){var tr=$("<tr></tr>");var td=$("<td align='center'>"+(i+1)+"</td>");//序号var td2=$("<td>"+eppd.ppdEpNo+"</td>");//工号var td3=$("<td>"+eppd.ppdEpName+"</td>");//姓名var td4=$("<td>"+eppd.ppdPostName+"</td> ");//岗位var td5=$("<td align='center'>"+eppd.ppdFactor+"</td>");//系数var td6=$("<td align='center'>"+eppd.ppdJxDf+"</td>");//绩效得分var td7=$("<td align='center'>"+eppd.ppdJxgz+"</td>");//5%绩效工资var td8=$("<td align='center'></td>");//一次分配绩效工资var td9=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td>");//加减项1var td10=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td>");//加减项2var td11=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");//加减项3var td12=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");//加减项4var td13=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");//加减项5var td14=$("<td align='center'></td>");//最终绩效var td15=$("<td><textarea id='biaozhun' name='textarea2' cols='30' rows='2' onpropertychange=\"if(value.length>50) value=value.substr(0,50)\">"+eppd.ppddemo16+"</textarea></td> ");//备注gdjxgz += eppd.ppdJxgz;//5%绩效工资合计tr.append(td);tr.append(td2);tr.append(td3);tr.append(td4);tr.append(td5);tr.append(td6);tr.append(td7);tr.append(td8);tr.append(td9);tr.append(td10);tr.append(td11);tr.append(td12);tr.append(td13);tr.append(td14);tr.append(td15);tbody.append(tr);})//合计行var tr_1=$("<tr></tr>");    var td_1=$("<td colspan='6' align='center'><font style='font-weight:bold'>合计</font></td>");    var td_2=$("<td align='center'><input name='jjze' id='jjze' size='15' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='"+gdjxgz+"'/></td>");    var td_3=$("<td align='center'></td>");    var td_4=$("<td colspan='5' align='center'><font style='font-weight:bold'>最终绩效工资合计</font></td>");    var td_5=$("<td></td>");    var td_6=$("<td></td>");    tr_1.append(td_1);    tr_1.append(td_2);    tr_1.append(td_3);    tr_1.append(td_4);    tr_1.append(td_5);    tr_1.append(td_6);    tbody.append(tr_1);    var tr_2=$("<tr class='lc2' bgcolor='ccdef4'>");    var td_11=$("<td>上月余额</td>");    var td_12=$("<td align='center'>"+lmb+"</td>");    var td_13=$("<td>本月绩效总额</td>");    var td_14=$("<td align='center'></td>");    var td_15=$("<td>本月可支配</td>");    var td_16=$("<td align='center'></td>");    var td_17=$("<td>本月余额</td>");    var td_18=$("<td align='center'></td>");    var td_19=$("<td colspan='7'></td>");    tr_2.append(td_11);    tr_2.append(td_12);    tr_2.append(td_13);    tr_2.append(td_14);    tr_2.append(td_15);    tr_2.append(td_16);    tr_2.append(td_17);    tr_2.append(td_18);    tr_2.append(td_19);    tbody.append(tr_2);    }

IE8及360下运行结果如图：

 

      通过对这个问题的解决，避免后台拼接html代码输出到前台的做法，这样很可能遇到浏览器版本不同，运行结果出现异常的问题。最保险的做法就是在前台通过循环返回的json数据的方式，一行行把html代码拼接好，里面需要从后台查询显示的数据都放在json串中的某个属性里，使用很方便。