在AJAX调用中使用“context:...”的正确方法是什么?

时间:2015-06-01 16:34:03

标签: javascript jquery ajax

所以我知道有很多关于AJAX和上下文使用的线程但是经过几个小时的阅读并尝试打开一个新的线程。

所以我有这个(缩短版)javascript函数:

this.CallService = function () {
    var Type = this.Type;
    var Url = this.Url;
    var Data = this.Data;
    var ContentType = this.ContentType;
    var DataType = this.DataType;
    var ProcessData = this.ProcessData;

    var ClipUrl = this.ClipUrl;
    var CountMax = this.CountMax;
    var Callback = this.Callback;

    var SucceededServiceCallback = this.SucceededServiceCallback;
    var FailedServiceCallback = this.FailedServiceCallback;


    return $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        context: this,
    }).done(function (msg) {//On Successfull service call
        SucceededServiceCallback(this, msg);
    }).fail(function (msg) {
        FailedServiceCallback(this, msg);
    });
}

此处的重要部分是context: this和两个回调donefail。我给回调函数提供了this上下文的那两个回调:

this.SucceededServiceCallback = function (context, result) {
    if (null != context) {
        UpdateDebugInfo(context, "succeeded: " + context.DataType + " URL: " + context.Url + " Data: " + context.Data + " Result: " +result);
    }
    if (context != null && context.DataType == "json" && result != null && context.Callback != null) {
        context.Callback(context, result);
    }
}

这里重要的部分是我使用上下文来查看变量DataType,Callback,Url等 问题现在是将上下文设置为最后使用的上下文(它是异步调用,因此所有变量都是上次调用的变量)。 所以我很确定context: this,部分有问题。我只是不知道如何使用这个权利。谢谢你的帮助。

TL; DR:
我在Ajax调用中使用context: this。 Context始终设置为最后一个“this”调用。我想用这个电话的“这个”。

1 个答案:

答案 0 :(得分:2)

你是"缓存"在您触发每个请求之前所有变量,但是在SucceededServiceCallback函数中,您正在检查this.XXX - 这不是您期望的var Type,而是实际的this.Type本身。

您可以做的是将这些属性放入对象并将其作为上下文传递,而不是您的主对象:

this.CallService = function () {
    var context = {
        Type : this.Type,
        Url : this.Url,
        Data : this.Data,
        ContentType : this.ContentType,
        DataType : this.DataType,
        ProcessData : this.ProcessData,
        ClipUrl : this.ClipUrl,
        CountMax : this.CountMax,
        Callback : this.Callback
    };

    var SucceededServiceCallback = this.SucceededServiceCallback;
    var FailedServiceCallback = this.FailedServiceCallback;

    return $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        context: context,
    }).done(function (msg) {//On Successfull service call
        SucceededServiceCallback(this, msg);
    }).fail(function (msg) {
        FailedServiceCallback(this, msg);
    });
}