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

时间:2015-04-07 10:21:00

标签: javascript jquery asp.net ajax

这里,我有一个函数需要在.NET项目中出现的任何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>

4 个答案:

答案 0 :(得分:5)

如果没有在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);
            }
        });

它减少了您onsubmit()代码form的来电!

更新: 在每个AJAX请求使用之前注册一个全局函数:

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

答案 1 :(得分: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

答案 2 :(得分:1)

您可以使用:

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

就是这样!

答案 3 :(得分:0)

使用

beforeSend: function () {
},  

ajax方法