从文本框操作创建GET请求

Question

当用户输入文字或点击go时，我需要将它们重定向到具有作为GET请求输入的值的页面。我无法想象我的生活。

我正在使用bootstrap，目前有：

        <div class="input-group">
           <input type="text" class="form-control" placeholder="channel name here...">
           <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
           </span>
        </div>

产生： 当用户输入文本并单击go，或点击enter时，我想将它们重定向到

example.com/search/?text=TEXT_ENTERED

Answer 1

• 将div替换为form。
• 将表单的action设置为您要转到的URL（无查询字符串）。
• 在您的示例中提供input一个name（text）
• 从type中删除button属性，使其成为提交按钮

......忘了JavaScript。这不是必需的。

Answer 2

这需要简单应用<form> HTML元素。只需使用以下内容围绕<input>：

<!-- Replace "/search" with the location of your search page -->
<form action="/search" method="GET">
    <!-- Your search field -->
    <div class="input-group">
        <input type="text" class="form-control" placeholder="channel name here...">
        <span class="input-group-btn">
            <!-- Make sure this is a submit button, like @Quentin mentioned -->
            <button class="btn btn-default">Go!</button>
        </span>
    </div>
</form>

现在，在搜索字段上按 Enter 或点击“开始！”将产生相同的结果，您应该到达所需的网址：mysite.com/search/?text=TEXT_ENTERED

快乐的编码！

Answer 3

您可以使用表单，或者如果要重定向，可以只将click.alocation设置为http://example.com/search/?text=TEXT_ENTERED的click事件添加事件处理程序。或者你可以使用像jQuery这样的JavaScript库来发出AJAX请求。

<button id="myButton" class="btn btn-default" type="button">Go!</button>
$("#myButton").on("click", function () {
$.ajax({
            url: 'http://example.com/search/?text=' + $("#myButton").text(),
            error: function (err) {
                    console.warn("Error", err);
                }
            },
            success: function (response) {
              //handle success
            },
            type: 'get'
        });
}