在任何 AJAX 调用之前触发 javascript 函数

Question

在这里，我有一个函数需要在 .NET 项目中的任何 AJAX 调用之前调用。

目前，我必须在每次单击要调用 AJAX 方法的按钮时调用 checkConnection，如果存在网络连接，则继续进行实际的 AJAX 调用！
无论如何，我想避免这种方式，并且应该在表单上的任何 AJAX 调用之前自动调用 checkConnection 函数。

简而言之，我想让函数的行为类似于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 中调用它，为此您可以使用 ajaxRequest 的 beforeSend 属性，如下所示，因此无需单独调用 checkConnection()：

$.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

最好的方法是使用发布-订阅模式添加任何额外的函数，以便在预定的时间（例如，在 ajax 之前或之后）调用。

jQuery 已经支持自定义发布订阅

对于这个特定的例子，只需这样做：

//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方法