Typeahead Bloodhound POST 请求

Posted 2023-05-07

【中文标题】Typeahead Bloodhound POST 请求

【英文标题】：Typeahead Bloodhound POST request

【发布时间】：2014-03-16 07:27:44

【问题描述】：

我似乎无法获得远程查询以正确使用 POST。

var creditors = new Bloodhound(
    datumTokenizer: function (d) 
        return Bloodhound.tokenizers.whitespace(d.value)
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 
        url: "../getCreditors",
        replace: function(url, query) 
            return url + "#" + query;
        ,
        ajax : 
            type: "POST",
            data: $.param(q: queryInput.val())
        
    
);

queryInput.val() 不获取对象的当前值，仅获取实例化寻血犬对象时的值。如何将查询字符串放入 ajax 数据选项中？

【问题讨论】：

***.com/a/46927923/3966458 没有 ajax

【参考方案1】：

你可以使用 $.ajax 的 beforeSend

var creditors = new Bloodhound(
    datumTokenizer: function (d) 
        return Bloodhound.tokenizers.whitespace(d.value)
    ,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 
        url: "../getCreditors",

        replace: function(url, query) 
            return url + "#" + query;
        ,
        ajax : 
            beforeSend: function(jqXhr, settings)
               settings.data = $.param(q: queryInput.val())
            ,
            type: "POST"

        
    
);

【讨论】：

虽然这段代码在应该调用 Ajax 方法的时候确实调用了它，但它没有正确设置 Content-Type，因此 ASP.NET MVC 至少不会解析发布的数据。

这将以“text/plain; charset=UTF-8”的内容类型发送，如果您希望它以 json 格式发送（如我 :D），您需要设置jqXhr 对象上的内容类型，如下所示： jqXhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

由于您已经调用了替换，您可以使用它将查询存储到您在 beforeSend 中使用的局部变量中。它消除了与 queryInput 的耦合。

@Snekse 你能解释一下你的评论吗？我尝试在替换this.q = query 中添加一行并将queryInput.val() 替换为this.q 但this.q 在调试器undefined 函数中显示为undefined。

这个doesn't work anymore。 @Atropo 答案中的代码确实有效。

【参考方案2】：

您可以将prepare 属性与remote 或prefetch 一起使用，请注意函数签名会发生变化。 以prefetch 为例：

var Bloodhound = new Bloodhound(
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: 
                    url: remote,
                    prepare: function (settings) 
                        settings.type = "POST";
                        settings.contentType = "application/json; charset=UTF-8";
                        return settings;
                    ,
                    remote: function (query, settings) 
                        settings.type = "POST";
                        settings.data = q: query, foo: 'bar'; // you can pass some data if you need to
                        return settings;
                    
                
            );

请记住，remote 的函数签名会随着function(query, settings) 而变化。

供参考：github.com/twitter/typeahead.js/issues/1236

【讨论】：

如果需要，您可以传递您的自定义data（例如，另一个字段的当前值等）。当前输入的值将在query 变量中

【参考方案3】：

我发现holylaw 提到的ajax 'beforeSend' 方法效果最好。

不过，更改 url 也很重要。否则，Typeahead 不会费心提出另一个请求。所以我只是在网址末尾添加了一个虚假参数。像这样

http://mylittleservice.com?blah=%QUERY

这样，当打包的 ajax 数据发生变化时，我可以确保向服务器发出新的请求。