如何在select2中访问HTTP响应标头

Question

我正在使用select2构建带有延迟添加结果列表的选择框。 但是，分页数据（例如，项目总数）不是JSON响应的一部分。 因此，我无法在ajax.results函数中访问它们。 相反，分页数据是HTTP响应标头的一部分。

select2的ajax中是否内置了某种拦截机制，以便我可以访问HTTP标头并将它们写到实际结果数据中？

Answer 1

@fynn的答案不再适用于Select2 4.x，这是一个示例。

它检查X-Page （当前页号，例如“ 1”）和X-Total-Pages （例如“ 5”）标题。 如果不存在，它还会通过rel=next检查Link标头，如https://developer.github.com/v3/#pagination

$(".js-data-example-ajax").select2({
  ajax: {
    url: '/path/to/index.json',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      // Returns the query params that should be passed to the server
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    transport: function(params, success, failure) {
      // Custom transport lets us get pagination info stored in the headers.
      // Check for X-Page and X-Total-Pages, and alternatively for Link rel=next
      var read_headers = function(data, textStatus, jqXHR) {
        var more;
        var current_page = parseInt(jqXHR.getResponseHeader('X-Page')) || 0;
        var total_pages = parseInt(jqXHR.getResponseHeader('X-Total-Pages')) || 0;
        var link = jqXHR.getResponseHeader('Link') || '';
        if ((current_page < total_pages) || (link.search(/<([^>]+)>;\s*rel\s*=\s*['"]?next['"]?\s*(,|$)/i) > -1)) {
          more = true;
        }
        else {
          more = false;
        }
        return {
          results: data,
          pagination: {
            more: more
          }
        };
      };
      var $request = $.ajax(params);
      $request.then(read_headers).then(success);
      $request.fail(failure);
    },
    cache: true
  }
});

Answer 2

我只是通过提供自定义传输功能解决了该问题：

transport: function(params) {
    var callback = params.success;
    params.success = function(data, textStatus, jqXHR) {
        callback({
            items: data,
            total: jqXHR.getResponseHeader('HeaderName')
        }, textStatus, jqXHR);
    };
    return $.ajax(params);
}