使用AJAX数据源时可以在Select2中设置查询字符串参数吗？

Posted 2023-05-07

【中文标题】使用AJAX数据源时可以在Select2中设置查询字符串参数吗？

【英文标题】：Can I set the query string parameters in Select2 when using AJAX data source?

【发布时间】：2018-01-14 05:00:20

【问题描述】：

我遇到了一个“奇怪”（也许不是）的情况，我需要通过 URL 传递参数，而不是作为 q 发送参数。看看下面来自docs的例子：

$(".js-data-example-ajax").select2(
  ajax: 
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) 
      return 
        q: params.term, // search term
        page: params.page
      ;
    ,
    processResults: function (data, params) 
      params.page = params.page || 1;

      return 
        results: data.items,
        pagination: 
          more: (params.page * 30) < data.total_count
        
      ;
    ,
    cache: true
  ,
  ...
);

在上面的例子中params.term被发送到服务器，你可以使用任何机制来获取它并做你想做的事情。

在我的例子中，我将搜索词发送到 API 端点。 API 期望类似于以下示例：

http://someurl?slug=56&title=56&description=56&content=56

换句话说：

'http://someurl?slug='+params.term+'&title='+params.term+'&description='+params.term+'&content='+params.term

正如您所注意到的，params.term 成为 API 的 URL 上要发送的值。

但我不知道如何使用 Select2 来实现这一点。我一直在寻找一些信息，但没有成功，这就是我到目前为止所看到的：

https://select2.github.io/options.html https://github.com/select2/select2/issues/3548 https://select2.github.io/options-old.html Select2 4.0.0 initial value with Ajax

但是没有人说我需要什么。有没有人知道如何实现这一目标？

【问题讨论】：

您想要的查询字符串似乎与 api 文档developer.github.com/v3/search 不匹配。您数据中的q 似乎正确

@charlietfl 这只是一个示例，并不意味着它是我刚刚从示例中复制并粘贴以将帖子保持在同一页面上的正确 URL，如果令人困惑，我可以将其更改为其他内容

确保当您使用组成的查询参数或显示有据可查的 github 之类的 api url 时会令人困惑

现在不知道插件中的params 与您的slug, title, description 等有什么关系，但您的data 对象属性应该与这些属性名称匹配

@charlietfl 请重新阅读帖子，现在更好了吗？当您对 OP 满意时，让我们清理这个 cmets :)

【参考方案1】：

更改数据对象以反映您希望在查询字符串中具有的属性：

data: function (params) 
  return 
    slug: params.term, 
    description: params.term,
    content: params.term
  ;
,

在开发工具网络中仔细检查这确实是作为 GET 完成的，否则尝试将 type:'GET' 添加到 ajax 选项

【讨论】：

太好了，你是最好的，我不需要在请求中添加type: 'GET'。谢谢