ajax成功回调函数ES6中的函数

时间:2016-05-19 20:25:28

标签: ajax es6-promise

我有一个简单的表格。我提交了。我有一个名为isSuccess的函数,当成功发生时会调用它。在isSuccess中我调用了一个函数testerit()。它永远不会被解雇,并抱怨它是未定义的。 那是什么

class FormSign {
    constructor(cfg) {
        this.init();
    }
    init() {
        // listen for form submit
        $('.emailbtn').on('click', (event) = > {
            event.preventDefault();
            this.validateForm();
        });
    }
    submitForm() {
        //..............
        $.ajax({
            'type': 'POST',
            'url': '/api/url',
            'data': forminfo,
            'success': this.isSuccess,
            'error': this.isError
        })
        event.preventDefault();
    }
    isSuccess() {
        //..............
        testerit();
    }
    signupError() {
        //...............
    }
    testerit() {
        console.log('just testing');
    }
}

1 个答案:

答案 0 :(得分:1)

通过将未绑定的函数传递给jQuery的ajax成功方法,您已失去对实例的引用,因此无法调用this.testerit。要解决这个问题,您应该将实例绑定到函数,或者将实例赋予jQuery以用作上下文。

$.ajax({
    'type': 'POST',
    context: this,
    'url': '/api/url',
    'data': forminfo,
    'success': this.isSuccess,
    'error': this.isError
})

$.ajax({
    'type': 'POST',
    'url': '/api/url',
    'data': forminfo,
    'success': data => this.isSuccess(data),
    'error': (jqXHR, status, error) => this.isError(jqXHR, status, error)
})

$.ajax({
    'type': 'POST',
    'url': '/api/url',
    'data': forminfo,
    'success': this.isSuccess.bind(this),
    'error': this.isError.bind(this)
})

然后在实例上正确调用testerit。

this.testerit();

https://jsfiddle.net/npc0nzjt/