Đi qua Tuỳ chỉnh Headers yêu cầu Ajax trên Select2

Question

Chúng tôi đang cố gắng để thực hiện Ajax nạp dữ liệu từ xa trong Select2: -

$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 }; 

      } 
     } 
    }; 

Chúng tôi đang sử dụng AngularJS. Với mỗi yêu cầu Http, chúng tôi đã đặt mặc định là có tiêu đề Authtoken của chúng tôi. Nhưng bằng cách nào đó nó không hoạt động kết hợp với yêu cầu Select2 Ajax. Trong mã trên, mã nhận xét là những nỗ lực không thành công của tôi.

Answer 1

Taken từ trang demo Select2 của:

Select2 sẽ vượt qua bất kỳ tùy chọn trong đối tượng ajax để jQuery $ .ajax chức năng, hoặc các chức năng vận chuyển bạn chỉ định.

Sử dụng JQuery 2+, tôi đã có thể đặt thành công tiêu đề OAuth 2.0 và Loại nội dung.

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

Answer 2

Tôi giải quyết vấn đề trên bằng cách cung cấp phương thức vận chuyển tùy chỉnh .. Sau đó, tôi bị kẹt với mục thả xuống không được chọn trên di chuột & mục thả xuống không được chọn sau khi nhấp chuột. Sau khi gỡ lỗi tôi tìm thấy proeprty "id" là phải có trong đối tượng json trả về.

Dưới đây là mã của tôi: -

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 
}; 

Answer 3

Đây là cách tôi cố định gửi auth token. Chỉ cần thêm điều này dưới dạng tham số Select2 ajax;

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

Answer 4

tùy chọn khác:

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

Answer 5

Bạn có thể làm như thế này:

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; 
}