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

最新推荐文章于 2022-08-02 21:45:53 发布

山中小溪

最新推荐文章于 2022-08-02 21:45:53 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/tjdy7707/article/details/46462477

版权

最近在一个项目中需要实现一个功能，把后台拼接好的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>");	//加减项1
			var td10=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td>");	//加减项2
			var td11=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");	//加减项3
			var td12=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");	//加减项4
			var td13=$("<td align='center'><input name='text2' type='text' id='duixiang' onKeyUp=\"if(isNaN(value)) execCommand('undo')\" value='' size='15' /></td></td>");	//加减项5
			var 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下运行结果如图：