JS--阻止ajax因資料重複多次提交的方法
阿新 • • 發佈:2019-02-20
1.需求:應用ajax技術非同步提交資料
2.問題:多次點選元素由於伺服器返還資料延遲問題,造成多次資料請求。
3.解決方法:
1.用變數識別符號 (定時器模擬延遲返還資料)
var clickState = 0;//初始化點選狀態
$(function(){
$('.button').click(function(){
if( clickState == 1){
//如果狀態為1就什麼都不做
}else{
clickState = 1; //如果狀態不是1 則新增狀態 1
setTimeout(addAjax,2000);
}
});
});
function addAjax(){
$.ajax({
success:function(){
$('.wrap').append('<div>新增</div>') ;
clickState = 0;
}
});
}
2.新增html內容作為標示
$(function (){
$('.button').click(function(){
if(!!$('.hidden')[0]){
}else{
$('body').append('<input type="hidden" class="hidden">'); //向html中新增 input.hidden 元素作為識別符號
setTimeout(addAjax,2000);
}
});
});
function addAjax (){
$.ajax({
success:function(){
$('.wrap').append('<div>新增</div>') ;
$('.hidden').remove();// 返回資料後 移除該元素
}
});
}