利用ajax動態新增資料時候出現的累加問題
阿新 • • 發佈:2018-12-26
情景如下:下拉選中存在資料,每次點選重新整理操作時候重新載入下拉選,由於採用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()"); } }); }