有條件地處理ajax請求

無論何時Ajax啓動（大部分都是用戶的操作）並在完成時隱藏，我都有一個全屏加載動畫。同時，我還使用Ajax調用服務器狀態setInterval。有條件地處理ajax請求

如何將Ajax調用分開以檢查服務器狀態，因爲如果它顯示爲全屏，它很麻煩。狀態旁邊的小加載圖標很好。

可參照下面的代碼片段：

$(document).ajaxStart(function() { 
 
    $.LoadingOverlay("show"); 
 
}); 
 
$(document).ajaxComplete(function() { 
 
    $.LoadingOverlay("hide"); 
 
}); 
 

 
$(document).ready(function() { 
 
    setInterval(ajaxCall, 3000); 
 

 
    function ajaxCall() { 
 
    $.ajax({ 
 
     url: "action.php", 
 
     type: "POST", 
 
     data: { 
 
     'action': 'checkstatus' 
 
     }, 
 
     dataType: "json", 
 
     success: function(data) { 
 
     console.log('online'); 
 
     $('.serverStatus').removeClass('ssOffline'); 
 
     $('.serverStatus').addClass('ssOnline').text('Online'); 
 
     }, 
 
     error: function(xhr, ajaxOptions, thrownError) { 
 
     console.log('offline'); 
 
     $('.serverStatus').removeClass('ssOnline'); 
 
     $('.serverStatus').addClass('ssOffline').text('Offline'); 
 
     } 
 
    }); 
 
    } 
 
});

.ssOffline { 
 
    color: red; 
 
} 
 

 
.ssOnline { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/loadingoverlay.min.js"></script> 
 

 
<p>Server status: <label class="serverStatus">-</label></p>

來源

2017-10-21 4 Leave Cover

可以使用global這是默認true。這個選項可以像ajaxStart和ajaxStop.This將防止使用控制全球處理器外觀上的全屏加載圖標。

如果你想顯示具體到這個調用任何其他圖標，你可以使用beforeSend處理

$(document).ajaxStart(function(event) { 
 
    console.log(event) 
 
    $.LoadingOverlay("show"); 
 
}); 
 
$(document).ajaxComplete(function() { 
 
    $.LoadingOverlay("hide"); 
 
}); 
 

 
$(document).ready(function() { 
 
    setInterval(ajaxCall, 3000); 
 

 
    function ajaxCall() { 
 
    $.ajax({ 
 
     url: "action.php", 
 
     type: "POST", 
 
     data: { 
 
     'action': 'checkstatus' 
 
     }, 
 
     dataType: "json", 
 
     global: false, // changed here 
 
     success: function(data) { 
 
     console.log('online'); 
 
     $('.serverStatus').removeClass('ssOffline'); 
 
     $('.serverStatus').addClass('ssOnline').text('Online'); 
 
     }, 
 
     error: function(xhr, ajaxOptions, thrownError) { 
 
     console.log('offline'); 
 
     $('.serverStatus').removeClass('ssOnline'); 
 
     $('.serverStatus').addClass('ssOffline').text('Offline'); 
 
     } 
 
    }); 
 
    } 
 
});

.ssOffline { 
 
    color: red; 
 
} 
 

 
.ssOnline { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/loadingoverlay.min.js"></script> 
 
<p>Server status: <label class="serverStatus">-</label></p>

來源

2017-10-21 04:50:20 brk

嗨，你可以包括狀態旁邊的小加載圖標對我來說太？謝謝。 –

@ 4LeaveCover請勿發佈編碼任務。即使他們看起來像一個評論。很不禮貌。這個網站上有無數的例子，用jQuery Ajax加載圖標。做一些研究並挑選其中一個。 – Tomalak

您可以設置jQuery.ajax()設置對象的屬性，使用beforeSend在$.ajaxSetup()替代.ajaxStart()，檢查當前設置是否有屬性集

function log(message) { 
 
    $("pre").text(function(_, text) { 
 
    return text + message + "\n" 
 
    }) 
 
} 
 
// does not provide `settings` or `jqxhr` as argument 
 
// we do not perform logic evaluation of current `$.ajax()` call here 
 
$(document).ajaxStart(function() { 
 
    log("ajax start"); 
 
}); 
 

 
$(document) 
 
    .ajaxComplete(function(e, jqxhr, settings) { 
 
    if (!settings.pollRequest) { 
 
     log("not poll request complete\n"); 
 
     // $.LoadingOverlay("hide"); 
 
    } else { 
 
     log("poll request complete\n"); 
 
    } 
 
    }); 
 

 
$.ajaxSetup({ 
 
    beforeSend: function(jqxhr, settings) { 
 
    if (settings.pollRequest) { 
 
     log("poll request beforeSend"); 
 
     // $.LoadingOverlay("show"); 
 
    } else { 
 
     log("not poll request beforeSend"); 
 
    } 
 
    } 
 
}); 
 

 
$(document).ready(function() { 
 

 
    setInterval(ajaxCall, 3000); 
 

 
    function ajaxCall() { 
 
    "ajaxCall"; 
 
    $.ajax({ 
 
     url: "data:text/plain,", 
 
     pollRequest: true 
 
    }); 
 
    } 
 

 
    $("button").on("click", function() { 
 
    $.ajax("data:text/plain,") 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<button> 
 
click 
 
</button> 
 

 
<pre></pre>

的jsfiddle https://jsfiddle.net/5hfty5mc/

來源

2017-10-21 05:11:53 guest271314

有條件地處理ajax請求

回答

相關問題