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 param;

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

Answer 2

另一种选择：

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

Answer 3

取自select2的演示页面：

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

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

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

Answer 4

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

以下是我的代码： -

    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;
}

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

5 个答案: