Select2 小部件将 param.term 空格作为“+”而不是 %20 发送到 ajax

Posted 2023-05-07

【中文标题】Select2 小部件将 param.term 空格作为“+”而不是 %20 发送到 ajax

【英文标题】：Select2 widget send param.term spaces to ajax as "+" and not %20

【发布时间】：2017-06-19 18:03:31

【问题描述】：

我正在开发一个连接到 SAP 服务层并从 url (API REST) 进行查询的应用程序。我正在使用着名的小部件 select2，但我遇到了问题。我需要对api进行查询，它的句子有一个空格字符（“”）：

"(startswith(CardCode,'"+params.term+"') or startswith(CardName,'"+params.term+"'))

空格是“或”运算符周围的空格。

所以这是我的代码：

$('#buscarCliente').select2(
        placeholder: "Ingrese código o descripción del cliente",
        allowClear: true,
        language: "es",

        ajax: 
            url: SLServer+"BusinessPartners",
            crossDomain: true,
            xhrFields: 
                        withCredentials: true
            ,
            dataType: 'json',
            type: 'GET',
            delay: 550,
            params: 
                contentType: 'application/raw; charset=utf-8'
            ,
            data: function (params) 
              return 

                $filter: "(startswith(CardCode,'"+params.term+"') or startswith(CardName,'"+params.term+"'))", // Como se va hacer la busqueda
                $orderby : "cardName",
                //contentType: 'multipart/form-data;boundary=<Boundary>',

                //$filter: "((startswith(CardName,'" + params.term.toUpperCase() + "') or startswith(CardCode,'" + params.term.toUpperCase() + "') or startswith(CardName,'" + params.term + "') or startswith(CardCode,'" + params.term + "')) and CardType eq 'C')&$top=15&$expand=PaymentTermsType",
                //$filter: "startswith(CardName,'" + params.term.toUpperCase() + "') or startswith(CardCode,'" + params.term.toUpperCase() + "')",
                page: params.page
              ;
            ,

            processResults: function (data, params) 
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;



            return 
              results: $.map(data.value, function(item) 
                    return  id: item.CardCode, text: "<b>"+item.CardCode+"</b> "+item.CardName ; //adecuamos el arreglo al select
                ),
              pagination: 
                    more: (params.page * 30) < data.total_count
              
            ;
          ,
          cache: true
        ,
        escapeMarkup: function (markup)  return markup; , // let our custom formatter work
        /*formatNoMatches: function (term) 
            return 'No se encontraron clientes con el código: "' + term + '".<br/><!--span class="link">Click&nbsp;here</span-->',
        ,*/
        minimumInputLength: 1,
        //templateResult: formatRepo, // omitted for brevity, see the source of this page
        //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
      );

如您所见，我将查询作为参数发送到小部件中输入的术语。问题是 select2 以这样的方式对查询进行编码，即用加号 (+) 而不是“%20”替换空格，因此 api rest 服务说它是一个非法字符，我无法得到我的结果。

这就是它的样子：

https://service.net:50000/b1s/v1/BusinessPartners?%24filter=(startswith(CardCode%2C%27CLIEN%27)+or+startswith(CardName%2C%27CLIEN%27))&%24orderby=cardName

正如大家所见，“或”运算符周围的空格已被加号替换。我已经测试了 javascript 函数“encodeUri()”和“encodeURIComponent()”，但它什么也没做，因为我认为它正在代码中被序列化。我添加了 contentType，我用“%20”手动替换了空格，但结果被编码并且更糟（%2520）......

谁能帮帮我。有没有办法改变这种类型的编码，让空格变成“%20”而不是该死的“+”？？

谢谢大家！

【问题讨论】：

当我发送 GET 请求时，我知道我可以将查询添加到 url 参数，但我记得我需要获取在搜索框中输入的术语，我没有不介意如何达到那个级别...

【参考方案1】：

我自己回答。

我正在阅读有关文档并找到重要线索：我可以从 javascript 函数中获取 ajax“url”属性，该函数将正在搜索的术语作为参数。因此，我构建了加入查询字符串的 url，并使用了 encodeURI javascript 函数，它起作用了！ :-D

ajax: 
            ....

            url: function (params) 
                return SLServer+"BusinessPartners"+encodeURI("?$top=15&$filter=((startswith(CardName,'" + params.term.toUpperCase() + "') or startswith(CardCode,'" + params.term.toUpperCase() + "') or startswith(CardName,'" + params.term + "') or startswith(CardCode,'" + params.term + "')) and CardType eq 'C')&$expand=PaymentTermsType";);
            ,

            ....

所以空格在这个函数中被翻译为 %20 并且 api 很高兴并吐出结果......

希望这对其他人有所帮助。来自委内瑞拉的拥抱 ;-)