Question

基本的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

            })

Answer 1

解决方案是将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行为。

Answer 2

您可以在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);
                    }
                }
            }
        }
    });
});

Answer 3

您可以通过将withCredentials设置为true来实现该属性＆＃34; xhrFields＆＃34;读者如下，数据源定义。

dataSource: {
                    transport: {
                        read: {
                            xhrFields: {
                                withCredentials: true
                            },
                            url: serviceURL
                        }
                    }
                }

确保您已在目标服务器的cors设置中设置 SupportsCredentials = true 。
希望这有帮助

配置Kendo提出的Ajax请求以支持跨域ajax请求

3 个答案: