配置Kendo提出的Ajax请求以支持跨域ajax请求
基本的kendo自动完成示例显示了通过Ajax请求获取匹配的搜索结果的设置。 如果请求的资源在同一个域上,则ajax加载工作正常,但我想知道是否支持配置底层的ajax请求以支持CORS。 有没有办法传递Ajax选项,就像你通常直接使用$.ajax({})
。
$("#products").kendoAutoComplete({ dataTextField: "ProductName", filter: "contains", minLength: 3, dataSource: { type: "odata", serverFiltering: true, serverPaging: true, pageSize: 20, transport: { read: "http://demos.kendoui.com/service/Northwind.svc/Products" } } }); });
我基本上希望对请求进行相同的精细控制,就像在常规JQuery Ajax请求中一样(例如下面的例子):
jQuery.ajax({ url: 'some url', data: {id:id}, contentType: 'application/json', type: "Get", xhrFields: { withCredentials: true }, crossDomain: true })
解决方案是将read属性分配给包装ajax调用的方法,如下所示:
$("#search").kendoAutoComplete({ dataTextField: "Name", minLength: 1, dataSource: { type: "json", serverFiltering: true, transport: { read: function(options) { $.ajax({ url: "someUrl", contentType: 'application/json', data: { text: options.data.filter.filters[0].value }, type: "Get", xhrFields: { withCredentials: true }, crossDomain: true, success: function (result) { options.success(result); } }); } } } } });
这使您能够替换默认的ajax行为。
你可以在beforeSend
方法上设置用户;
$("#products").kendoAutoComplete({ dataTextField: "ProductName", filter: "contains", minLength: 3, dataSource: { type: "odata", serverFiltering: true, serverPaging: true, pageSize: 20, transport: { read: { url: "http://demos.kendoui.com/service/Northwind.svc/Products", type: 'POST', beforeSend: function(req) { req.setRequestHeader('Auth', your_token); } } } } }); });
对于数据源定义,可以通过将下面的“xhrFields”的withCredentials设置为true来实现它。
dataSource: { transport: { read: { xhrFields: { withCredentials: true }, url: serviceURL } } }
确保已在目标服务器的cors设置中设置SupportsCredentials = true 。
希望这可以帮助