Ajax 设置“上下文”不影响“数据”位置

Question

以下 Ajax 作品

function Retrieve(el) {
    var table = this;
    this.el = el;
    this.fetchInfo = function () {
        $.ajax('data.html', {
            context: table,
            <!-- QUESTION HERE -->
            data: {
                location: table.data('location')
            },
            success: function (response) {
                this.el.find('.info').html(response).fadeIn();
            },
        }
        }

但我想知道为什么我不能用this.data 在表示的行上替换table.data。由于我将上下文设置为table 变量，所以this 现在应该设置为table 所指的任何内容，对吗？这适用于 Ajax 对象的其他成员（包括success）的上下文，但不适用于data 的成员。为什么会这样？

data('name') 从属性为data-name 的标签中提取值

Answer 1

您提供的context 变量仅适用于success 回调，并且不会更改传递给$.ajax 的任何其他参数。

因此，答案取决于您实际致电fetchInfo 的方式。 data: 变量将在 fetchInfo 具有的任何上下文中解析。鉴于您遇到问题，这表明您没有以 Retrieve 对象作为其上下文调用函数。

EDIT这行是你的问题：

this.el.on('click', 'button', this.fetchInfo);

仅仅因为您引用了this.fetchInfo，并不会在随后调用this 时将其作为上下文。试试这个：

this.el.on('click', 'button', $.proxy(this.fetchInfo, this));

Answer 2

查看$.ajax() 的documentation，我发现context 被设置为callbackContext 变量。这可以使用success、error、beforeSend、complete，但不能使用data 选项。

AJAX 选项被分配给名为 s 的变量：

s = jQuery.ajaxSetup({}, options),

data 选项被转换为字符串，但callBackContext 未被使用。

// Convert data if not already a string
if (s.data && s.processData && typeof s.data !== "string") {
    s.data = jQuery.param(s.data, s.traditional);
}

因此需要使用this以外的变量来设置为data指定元素。