1. 程式人生 > >JS--阻止ajax因資料重複多次提交的方法

JS--阻止ajax因資料重複多次提交的方法

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();// 返回資料後 移除該元素 } }); }