在任何AJAX調用之前觸發javascript函數

Question

在這里，我有一個需要在.NET項目中存在的AJAX調用之前被調用的函數。

當前，我必須在將要調用AJAX方法的每個按鈕單擊上調用checkConnection ，如果存在網絡連接，則繼續進行實際的AJAX調用！
無論如何，我想避免這種方式，並且應該在窗體上的任何AJAX調用之前自動調用checkConnection函數。

簡而言之， 我想使函數的行為像一個event ，該event將在任何AJAX調用之前觸發

添加樣本，點擊按鈕即可進行AJAX調用； 當然，檢查互聯網可用性之后...

//check internet availability
function checkConnection() {
    //stuff here to check internet then, set return value in the variable
    return Retval;
}

//Ajax call
function SaveData() {
        var YearData = {
            "holiday_date": D.getElementById('txtYears').value
        };
        $.ajax({
            type: "POST",
            url: 'Service1.svc/SaveYears',
            data: JSON.stringify(YearData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (data, status, jqXHR) {
                //fill page data from DB
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }

下面是調用函數的當前方法：

<form onsubmit="return Save();">
    <input type="text" id="txtYears" /><br />
    <input type="submit" id="btnSave" onclick="return checkConnection();" value="Save" />
    <script>
        function Save() {
            if (confirm('Are you sure?')) {
                SaveData();
            }
            else {
                return false;
            }
        }
    </script>
</form>

Answer 1

您不能隱式調用函數，而無需在JavaScript中實際編寫一次調用（！）。

因此，最好將其稱之為實際AJAX和您可以使用beforeSend像下面ajaxRequest的財產，因此也就沒有必要要求checkConnection() seperately：

$.ajax({
            type: "POST",
            url: 'Service1.svc/SaveYears',
            data: JSON.stringify(YearData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            beforeSend: function() {
               if(!checkConnection())
                   return false;
            },
            success: function (data, status, jqXHR) {
                //fill page data from DB
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });

它減少了您對form標簽的onsubmit()進行的調用！

更新：在每個AJAX請求使用之前注冊全局函數：

$(document).ajaxSend(function() {
  if(!checkConnection())
     return false;
});

Answer 2

最好的方法是使用publish-subsribe模式來添加在預定時間（例如，在ajax之前或之后）要調用的任何其他函數。

jQuery已經支持自定義publish-subsrcibe

對於此特定示例，只需執行以下操作：

//Ajax call
function SaveData(element) {
       var doAjax = true; 
       var YearData = {
            "holiday_date": D.getElementById('txtYears').value
        };
        if (element === myForm) 
        {
           doAjax = checkConnection();
        }
        if ( doAjax )
        {
        $.ajax({
            type: "POST",
            url: 'Service1.svc/SaveYears',
            data: JSON.stringify(YearData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (data, status, jqXHR) {
                //fill page data from DB
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
        }
        else
        {
          // display a message
        }
    }

希望我正確理解你的意思。

更新：

在中， if可以從窗體或字段中調用函數，則可以進行其他檢查（例如，添加參數SaveData（element））

如果您在html中使用saveData，請執行以下操作： "saveData(this)" ，也許您也應該發布html

Answer 3

您可以使用：

$(document)
.ajaxStart(function () {
  alert("ajax start");
})
.ajaxComplete(function () {
     alert("ajax complete");
})

而已！！

Answer 4

采用

beforeSend: function () {
},  

ajax方法