JQuery 调试

一、IE兼容问题

 

IE6对标准的支持确实太差，本以为用了jQuery可以屏蔽浏览器之间的差异，发现不是那么回事，在FF上能运行正常的JS，到IE上就是没反应。

下面脚本，有两个功能，一个是页面加载时，通过ajax填充select数据，另一个是select change事件发生时，发送ajax请求改变页面table列表。

 

脚本一、FF上通过，IE不起作用

 

 

/*==========加载时执行的语句==========*/
$(function()
{
	$.getJSON(ctxpath + "/orgmodel/roletype.do",{ "method": "ajaxGetAll" }, 
		function(data, textStatus){
			$.each(data, function(i, n){
				var option = new Option(n.name, n.id);
				$("#typeSelect").append($(option));
			});
		
		});

	$("#typeSelect").change(function(event){
		value = $("#typeSelect").val(); 
		$("#tbody").empty();
		$.getJSON(ctxpath + "/orgmodel/roletype.do",{ "method": "ajaxGetRoleList","roletypeid":value}, 
			function(data, textStatus){
				$.each(data, function(i, n){
					j = i + 1;
					var tr = $("<tr/>");
					td1 = $("<td width='4%' align='center'>" + j + "</td>");
					td2 = $("<td/>");
					input = $("<input type='checkbox' name='ID' value='" + n.id +"'/>");
					if(n.disabled){
						input.attr("disabled","disabled");
					}
					a = $("<a href='" + ctxpath + "/orgmodel/globalroleaction.do?action=FindRoleByID&roleid=" + n.id + ">" + n.name + "</a>");
					td2.append(input).append(a);
					tr.append(td1).append(td2);
					tr.appendTo($("#tbody"));
				});
			
			});
	});
})

 

脚本二、FF、IE都能通过

 

 

$(function()
{
	$.getJSON(ctxpath + "/orgmodel/roletype.do",{ "method": "ajaxGetAll" }, 
		function(data, textStatus){
			$.each(data, function(i, n){
				//var option = new Option(n.name, n.id);
				//$("#typeSelect").append($(option));
				var option = $("<option value='" + n.id + "'>" + n.name + "</option>");
				$("#typeSelect").append($(option));
			});
		
		});

	$("#typeSelect").change(function(event){
		value = $("#typeSelect").val(); 
		$("#tbody").empty();
		$.getJSON(ctxpath + "/orgmodel/roletype.do",{ "method": "ajaxGetRoleList","roletypeid":value}, 
			function(data, textStatus){
				$.each(data, function(i, n){
					j = i + 1;
					var tr = $("<tr/>");
					var td1 = $("<td width='4%' align='center'>" + j + "</td>");
					var td2 = $("<td/>");
					var input = $("<input type='checkbox' name='ID' value='" + n.id +"'/>");
					if(n.disabled){
						input.attr("disabled","disabled");
					}
					var a = $("<a>" + n.name + "</a>");
					a.attr("href",ctxpath + "/orgmodel/globalroleaction.do?action=FindRoleByID&roleid=" + n.id );
					td2.append(input);
					td2.append(a);
					tr.append(td1).append(td2);
					tr.appendTo($("#tbody"));
				});
			
			});
	});
})

 

 

“脚本一”中总共写了两段代码，IE居然一个都不能通过，太不给面子了！还好，通过其它方式，最终运行起来了。

 

二、IE缓存问题

      在使用ajax get请求情况下，IE使用缓存数据，FF不存在这种情况。

      换成Post方式，问题就解决了。

 

三、中文问题

      使用get请求，参数附加在url上，会出现中文问题，我用的Tomcat，要解决也可以，把Tomcat容器URIEncoding设成utf-8，但这样不通用。换成Post方式提交，问题解决。