如何在ajax成功函数中调用函数方法？

Question

如何在$.ajax(){success}方法中调用 pagePresets.setFilter()？

self.setFilter.call('network', data.networks); 返回

未捕获的类型错误：无法读取 undefined(...) 的属性“调用”

当self.setFilter('network', data.networks);

未捕获的类型错误：self.setFilter 不是函数（...）

代码：

function pagePresets() {
    this.loading = true;
    this.isLoading = function () {
        return this.loading;
    };
    this.setLoading = function (state) {
        this.loading = state;
        return;
    };
    /** this function loads saved filters */
    this._loadFilters = function() {
        jQuery.ajax({
            type: 'post',
            dataType: "json",
            url: 'data.json',
            success: function (data) {
                //HOW TO CALL setFilter? this solution is not working
                pagePresets.prototype.setFilter.call('network', data.networks);
            }
        });
    };
}

pagePresets.prototype.setFilter = function (target, value) {
 console.info(target + ' ' + value );
}

Answer 1

call函数将“上下文对象”作为第一个参数。 在这里更深入地了解调用函数。

在 ajax 回调函数中， this或self不再引用您的类对象。 而pagePresets是一个没有静态属性的函数类。 所以你需要获取对象实例。

您需要指定要使用哪个实例调用原型函数。 我通常在我的“类”中声明一个私有属性，其中包含对上下文发生变化的这种场景的对象的引用。

function pagePresets() {
    //create a local variable here
    var localInstance = this;

    this.loading = true;
    this.isLoading = function () {
        return this.loading;
    };
    this.setLoading = function (state) {
        this.loading = state;
        return;
    };
    /** this function loads saved filters */
    this._loadFilters = function() {
        jQuery.ajax({
            type: 'post',
            dataType: "json",
            url: 'data.json',
            success: function (data) {
                //Use the variable here to specify the correct context.
                //the functions arguments need to be an array for the call function
                pagePresets.setFilter.call(localInstance, [ 'network', data.networks ]);
            }
        });
    };
}

pagePresets.prototype.setFilter = function (target, value) {
    console.info(target + ' ' + value );
}

Answer 2

您可以尝试在这样的另一个函数中调用它

function success() {
    pagePresets.prototype.setFilter.call('network', data.networks);
}

function error() {
    alert("error");
}


function searchEntity(id,userName, family) {
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "http://localhost:8080/mvc-test/rest/user/searchAll?pageNumber=1&pageSize=2&&orderBy=userName asc",
        headers: {'X-CSRF-TOKEN': getMetaContentByName('_csrf')},
        data : JSON.stringify({
            "id":id,
            "userName" : userName,
            "familyName" : family
        }),
        dataType : 'json',
        success : success,
        error : error
    });
}

Answer 3

另一种方法是将父上下文传递给成功方法或委托。

在下面的代码中， onAjaxResponseReceived函数并使用对父（类）上下文self的引用，从中可以访问其他方法func1和func2 。

class TestClass{
    constructor(searchUrl) {
        this.searchUrl = searchUrl;
    }

    bind() {
        self = this;

        $.ajax({
            url: self.searchUrl,
            type:"POST",
            data: data,
            success: function (responseData) {
                self.onAjaxResponseReceived(self, responseData);
            }
       });
    }

    onAjaxResponseReceived(self, data) {
        self.func1(data);
        self.func2(data);
    }

    func1(data) {
        console.log('func 1');
    }

    func2(data) {
        console.log('func 2');
    }

}