Typeahead Bloodhound POST请求

Question

我似乎无法正确使用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() 无法获取对象的当前值，而只能获取 Bloodhound 对象实例化时的值。如何将查询字符串传递到 ajax 数据选项中？

- Ablue

---

不使用ajax的情况下，可以通过以下方式实现：

1. 创建一个表单元素，将其隐藏并设置其action属性为要提交的URL。
2. 在表单中添加所有必需的输入字段。
3. 添加一个提交按钮，当用户单击该按钮时，表单将被提交到指定的URL。

这种方法不需要使用ajax，但是它会导致页面刷新。如果您想在不刷新页面的情况下提交表单，请考虑使用XMLHttpRequest对象或fetch API。 - Saahithyan Vigneswaran

Answer 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"

        }
    }
});

- holylaw

---

尽管此代码在应该调用Ajax方法时确实进行了调用，但它没有正确设置Content-Type，因此至少在ASP.NET MVC中，无法解析已发布的数据。 - RickNZ

这将使用“text/plain; charset=UTF-8”作为内容类型发送，如果您想要将其发送为json（就像我一样:D），则需要在jqXhr对象上设置内容类型，如下所示：jqXhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); - Nashenas

由于您已经在调用replace，因此可以使用它将查询存储到本地变量中，并在beforeSend中使用它。 这将消除对queryInput的耦合。 - Snekse

@Snekse，您能详细解释一下您的评论吗？我尝试在this.q = query中添加一行并将queryInput.val()替换为this.q，但是在调试器的beforeSend函数中，this.q显示为未定义。 - Adam

这个不再起作用。@Atropo的答案中的代码是有效的。 - ᴍᴇʜᴏᴠ

Answer 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

- Atropo

---

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

Answer 3

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

但是同样重要的是修改 URL。否则 Typeahead 不会再次发出请求。所以我只是在 URL 的末尾添加了一个虚假参数。像这样

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

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

- Jamie Popkin