jquery - 将自定义标头传递给 Select2 上的 Ajax 请求

Question

我们正在尝试在 Select2 中实现 Ajax 远程数据加载：-

 $scope.configPartSelect2 =  {
        minimumInputLength: 3,
        ajax: {
            url: "/api/Part",
           // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization-Token', http.defaults.headers.common['Authorization-Token']); },
          //  headers: {'Authorization-Token': http.defaults.headers.common['Authorization-Token']},
            data: function (term, page) {
                return {isStockable: true};
            },
            results: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                  return { results: data };

            }
        }
    };

我们正在使用 AngularJS。对于每个 Http 请求，我们都将其默认设置为 Authtoken 作为标头。但不知何故，它不能与 Select2 Ajax 请求结合使用。在上面的代码中，注释代码是我失败的尝试。

Answer 1

这就是我修复发送身份验证令牌的方式。只需将其添加为 Select2 ajax 参数；

transport: function(params){
    params.beforeSend = function(request){
        request.setRequestHeader("Authorization", 'OAuth ' + api_access_token);
    };
    return $.ajax(params);
},

Answer 2

取自 select2 的演示页面：

Select2 会将 ajax 对象中的任何选项传递给 jQuery 的 $.ajax 函数或您指定的传输函数。

使用 JQuery 2+，我能够成功设置 OAuth 2.0 和 Content-Type 标头。

ajax: {
    headers: {
        "Authorization" : "Bearer "+Cookies.get('accessToken'),
        "Content-Type" : "application/json",
    },
}

Answer 3

另外一个选项：

ajax: {
    url: '/api/Part',
    params: { headers: { "Authorization": "XXX" } },
    ...
}

Answer 4

我通过提供自定义传输方法解决了我的上述问题。然后我被困在鼠标悬停时未选择下拉项目和单击后未选择下拉项目。调试后我发现返回的 json 对象中必须有属性“id”。

以下是我的代码： -

    var fetchPart = function (queryParams) {

        var result = http.get(queryParams.url, queryParams.data).success(queryParams.success);

    result.abort = function() {
        return null;
    };
    return result;
};

var partFormatResult = function (part) {
    return "<div><h4>" + part.PartNumber + "</h4><p>"+ part.PartDescription + "</p></div>";
};

var partFormatSelection = function (part, container) {
    console.log(part.Id + "number - " + part.PartNumber);
    return part.PartNumber;
//    return part.PartNumber;
    //return part.Id;
};

$scope.configPartSelect2 =  {
    minimumInputLength: 3,
    ajax: {
        url: "/api/Part",
        data: function (term, page) {
            return { params: { isStockable: true, query: term, pageNo: page } };
        },
        transport: fetchPart,
        results: function (data, page) {
            console.log("result is called by select2");
            var more = (page * 10) <= data.length; // whether or not there are more results available
            return { results: data, more: more };
        }
    },
    formatResult: partFormatResult,
    formatSelection: partFormatSelection,
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
};

Answer 5

你可以这样做：

transport: function (params, success, failure) {

    params.beforeSend = function (request) {
        request.setRequestHeader("Authorization-Token", http.defaults.headers.common['Authorization-Token']);
    };
    var $request = $.ajax(params);

    $request.then(success);
    $request.fail(failure);

    return $request;
}

Answer 6

另一个简单的选择：

ajax: {
    beforeSend: function (request) {
        request.setRequestHeader("X-CSRF-TOKEN", csrf_token);
    },
}