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方式提交，問題解決。