javascript - 使用 Bootstrap 标签输入和 AJAX 时，表单输入的值不会在 ReadyState 上发生变化

Question

我有以下 HTML 表单:

<form method="post" action="./results.php">
    <input type="submit" name="submitbtn" id="submitButton" class="btn btn-default btn-responsive" role="button">
    <input name="q" id="query" value="" data-role="tagsinput"/>
</form>

使用 AJAX 加载页面后，我想使用 http.responseText 填充值字段。我正在尝试这样做:

function AjaxFunction()
{
    url = 'fbserver.php';
    http.open("GET",url, true);
    http.onreadystatechange = function()
    {
        if (http.readyState == 4)
        {
            $(".se-pre-con").fadeOut("slow");
            var query = http.responseText; // The user's interests as a string
            document.getElementById("query").value = query;
            /* Tried refreshing the input here like suggested in the linked question ($('input').tagsinput();) */
        }
    }
    http.send(null);
}

但是，它不起作用，使表单输入为空并且 value 属性保持不变。我尝试了 document.getElementById("query").name = query; 并且 name 属性正常更改。

我猜这与前面提到的tagsinput插件有关here ，但我无法根据答案解决这个问题。任何帮助，将不胜感激! ;)

Answer 1

您应该使用插件的 api，而不是直接输入文本值。

我正在使用 jQuery(我认为该插件也依赖它，所以你也可以使用这种方法)。因此，在 ajax 调用中，您可以:

$('#query').tagsinput('add', http.responseText);

您可以在此处查看其他方法:https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/