結合兩個ajax函數？

Question

我有一個網站，其中有兩個頁面：活動預訂頁面和登錄頁面。

我的目標：我想聲明兩個Ajax函數，loginUser（）和bookEvent（），它們可以在任何頁面上使用，也可以結合使用。 當用戶在登錄頁面上單擊“登錄”時，僅將執行loginUser（）函數，當用戶在事件預訂頁面上單擊“預訂事件”時，首先應檢查用戶是否已登錄，然后檢查他沒有登錄，他將有機會登錄（調用loginUser函數），一旦登錄，他將自動預​​訂該事件（調用bookEvent函數）。

我的問題：在后一種情況下，如何合並兩個功能？ 如果用戶已經登錄，那么如何實現呢？在用戶單擊“預訂事件”時，在事件預訂頁面上僅會激活bookingEvent（）函數？ 我不是在要求php代碼，我已經知道如何將兩個函數彼此分開使用以及如何連接到數據庫！

到目前為止，這是我想出的：

我的兩個常規可自定義函數：

// LOGIN USER FUNCTION
function loginUser(login_query, param_response_dberror, 
param_response_failed, param_response_success) {

        $.ajax({
                type : "POST",
                url : "system/process-login.php",
                data : login_query,
                cache : false,
                success : function(ajaxresponse) {
                                if (ajaxresponse === 'db_error') {
                                    param_response_dberror();
                                }
                                if (ajaxresponse === 'failed') {
                                    param_response_failed();
                                }
                                if (ajaxresponse === 'success') {
                                    param_response_success();
                                }
                            }
                        });

} // /function loginUser();

// BOOK EVENT FUNCTION
function bookEvent (booking_query, param_response_dberror, 
param_response_failed, param_response_success) {

        $.ajax({
                type : "POST",
                url : "system/process-booking.php",
                data : booking_query,
                cache : false,
                success : function(ajaxresponse) {
                                if (ajaxresponse === 'db_error') {
                                    param_response_dberror();
                                }
                                if (ajaxresponse === 'failed') {
                                    param_response_failed();
                                }
                                if (ajaxresponse === 'success') {
                                    param_response_success();
                                }
                            }
                        });

} // /function bookEvent();

我的頁面前端：

<h1>Some event</h1>
<p>Some event description</p>

<a href="#">book event</a>

<div id="loginbox" style="display:none">
<input type="text" id="username" placeholder="username">
<input type="password" id="password" placeholder="password">
<a href="#" id="login_and_book">login and book</a>
</div>

首先，應檢查用戶是否已登錄。

• 如果他未登錄：使登錄框可見，並且當用戶單擊“登錄並預訂”時， 他將登錄並預訂事件 。 當用戶單擊按鈕時，如何合並兩者？
• 如果他已經登錄：預定活動。

Answer 1

聽起來這聽起來像是jQuery“ Promises”的后代 ，盡管由於您的“錯誤”條件在AJAX層上看起來像“成功”，這一事實使情況變得復雜。

您將需要維護一些瀏覽器端狀態，以指示用戶是否已成功登錄，最初為false ，並在loginUser函數的“ success”分支中設置為true 。 當然，您還必須在服務器上也維護此狀態，以避免用戶通過在客戶端修改代碼來繞過登錄要求的可能性。

我建議也將您的成功和失敗條件分開，並使用諾言來實現“關注點分離”：

var loggedIn = false;

// returns promise that will be resolved by logging in via AJAX,
// or automatically resolved if the user was already logged in
function loginUser(login_query) {
    var def = $.Deferred();
    if (loggedIn) {
        def.resolve();
    } else {
        $.ajax({
            type : "POST",
            url : "system/process-login.php",
            data : login_query,
            cache : false
        }).then(function(ajaxresponse) {
            if (ajaxresponse === 'success') {
                loggedIn = true;
                def.resolve();
            } else {
                def.reject(ajaxresponse);
            }
        });
    }
    return def.promise();
};

相似地修改bookEvent函數，然后在按下“ book event”按鈕時，使用如下代碼：

function autoBook() {
    return loginUser(login_query).then(bookEvent);
}

請注意-此示例非常不完整 。 您將需要安排發送適當的查詢參數，並根據從promise收到的（最終）結果來調用回調。

Answer 2

根據定義，AJAX是異步的，因此即使您可以將它們組合為一個功能，也無法保證始終會首先接收到其中一個（例如：登錄可能在預訂后處理，等等）。 最好的選擇是將兩者放在一起-特別是在成功回調中。

但是，這引出了您如何登錄用戶的問題； 如果您使用某種重定向，則嘗試將它們合並是沒有意義的，因為在用戶重定向之后，先前的AJAX調用將被取消。 如果只是將用戶登錄信息匯總到預訂表中，為什么不讓案例服務器端檢查用戶“匯總”是否在您發送的數據中？

這是關於“並行” AJAX請求的一些內容 ，但是我認為您真正要尋找的是“順序” AJAX隊列（在同一鏈接中進行了演示）。