如何在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');
    }

}