如何将标题添加到 jqueryui 自动完成调用？

Posted 2023-02-19

【中文标题】如何将标题添加到 jqueryui 自动完成调用？

【英文标题】：How do I add headers to a jqueryui autocomplete call?

【发布时间】：2015-11-30 22:14:31

【问题描述】：

我正在尝试将 http 请求标头添加到 jqueryui 自动完成请求。我查看了 jquery 站点上的文档，并在那里为 ajax 请求提供了解决方案。我认为解决方案在我的情况下是相似的，但我无法让该死的事情发挥作用。

这是我的代码。它被包裹在一个 angularjs 指令中，但“链接”方法内部的调用将是相同的，而不是它在指令中。

app.directive("buildingSearch", function () 
    // I bind the $scope to the DOM behaviors.
    function link(scope, element, attributes, controllers) 
        //Attach the autocomplete functionto the element
        element.autocomplete(
            source: 'api/building/unitOrgMdl',
            minLength: 2,

            //*********
            //This is the addition I made as per the jquery documentation that I figured would work but doesn't
            headers: 
                'Authorization': '122222222222'
            ,
            //*********

            select: function (event, ui) 
                element.val(ui.item.label);
                element.blur();
                scope.getbuildings( data: ui.item )
                return false;
            
        );
    

    // Return the directive confirugation.
    return (
        link: link,
        restrict: "EA",
        replace: true,
        scope: 
            getbuildings: '&'
        
    );
);

【参考方案1】：

我想通了...而且效果很好！我不能确保这是最好的方法，但它看起来很可靠。我在 autocomplete() 方法之前添加了以下代码。

$.ajaxSetup(
    headers:  'Authorization': '122222222222' 
);

所以整个新代码看起来像这样。

app.directive("tmBuildingSearch", function (authService) 
    // I bind the $scope to the DOM behaviors.
    function link(scope, element, attributes, controllers) 
        //Attach the autocomplete function to the element
        //NEW CODE. This attaches a custom header
        $.ajaxSetup(
            headers:  'Authorization': '122222222222' 
        );

        element.autocomplete(
            source: 'api/building/unitOrgMdl',
            minLength: 2,
            select: function (event, ui) 
                element.val(ui.item.label);
                element.blur();
                scope.getbuildings( data: ui.item )
                return false;
            
        );
    

    // Return the directive configuration.
    return (
        link: link,
        restrict: "EA",
        replace: true,
        scope: 
            getbuildings: '&'
        
    );
);

我是从另一篇关于 Stake Overflow 的帖子中得到这个想法的。

How can I add a custom HTTP header to ajax request with js or jQuery?

我希望这对其他人有帮助！

增强提示！我从指令中删除了这个添加的代码并将其放在主应用程序模块中，因此任何 ajax 调用都会将 Authorization 标头添加到其中。效果很好！