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

Posted 2023-05-07

【中文标题】将自定义标头传递给 Select2 上的 Ajax 请求

【英文标题】：Passing Custom Headers to Ajax request on Select2

【发布时间】：2012-10-19 13:02:30

【问题描述】：

我们正在尝试在 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 请求结合使用。在上面的代码中，注释代码是我失败的尝试。

【问题讨论】：

接受的答案可能是 2012 年的唯一选择，但今天this answer 应该适用于所有人。

【参考方案1】：

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

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

【讨论】：

谢谢，这是唯一对我有用的解决方案！

【参考方案2】：

取自 select2 的演示页面：

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

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

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

【参考方案3】：

另一种选择：

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

【讨论】：

是的 - the accepted answer 在 Select2 3.5.2 中对我不起作用，但这个起作用了。

【参考方案4】：

我通过提供自定义传输方法解决了我的上述问题.. 然后我被困在鼠标悬停时未选择下拉项目和单击后未选择下拉项目。调试后发现返回的json对象中必须有property“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
;

【参考方案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;

【参考方案6】：

另一个简单的选择：

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

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。