1. 程式人生 > >利用ajax動態新增資料時候出現的累加問題

利用ajax動態新增資料時候出現的累加問題

情景如下:下拉選中存在資料,每次點選重新整理操作時候重新載入下拉選,由於採用ajax,每次重新載入前先將原有節點移除,再載入,但是當重新整理過快就會導致原有節點還未清空就又追加了新節點,導致資料重複

解決辦法:當點選重新整理操作的時候,觸發單擊事件,將單擊操作利用js設定為不可使用,當ajax結束後,重新啟用單擊操作,程式碼如下:

<select name="nickName" id="nickName"></select><a href="#" onclick="loadDom()">重新整理</a>

JS如下:

function loadDom(){
	$("#nickName").empty();//清空節點
	//超連結點選是無反應--此處為了避免頻繁點選造成ajax結果累積重複 ajax完成後才可繼續重新整理
	$("a").attr("onclick","return false");
	$.ajax({
		type:"post",
		url:"<%=findWeChatNickName%>",
		dataType:"json",
		success:function(result){
			var data = result.mapList;
			for(var key in data){   //key    data[key]
				//追加到下拉選節點
				var $option = $("<option value="+ data[key] +">"+ key +"</option>");
				$("#nickName").append($option);	
			}
			$("a").attr("onclick","loadDom()");
		}
	});
}