javascript - 在 jQuery 的 GET 请求中使用发送按钮

Question

我正在使用 jQuery 向我的服务器发送请求，然后呈现结果。但是，现在我想使用一个按钮，这样只有在点击发送按钮后才会发送请求，而不是像我之前的代码那样使用了“onkeyup”，这是不可控的；因为我想在输入完请求后而不是之前发送我的请求。

         <script>
       function Search(query_text)
        {
        $.get( "http://localhost:9000?query="+query_text, function( data ) {
                 $(\"#div2\").empty()
                 ..............
                 $(\"#div2\").append("</table>")
        }, "json")
    .fail(function() {
           $("#rep")
               .append('<br/><p style="color:red">Oops! Error with XMLHttpRequest</p>')
        });
        ;
        }   
        </script>

这是调用 jQuery 函数的输入:

  <input id="queryText" type="text" onkeyup="Search($(this).val())" /><br>

我尝试添加一个简单的按钮，然后像这样调用 jQuery 函数，但它不起作用，因为页面重新加载并且我没有得到我需要的结果:

        <form class="form-inline">
        <div class="form-group">
        <input type="text" class="form-control" id="queryText" placeholder="Your text">
        </div>
        <button type="submit" class="btn btn-primary" onclick="Search($('#queryText').val())">Find courses</button>
        </form>

我不知道是否有办法继续使用 GET 请求，而不是使用表单并发送 POST 请求。

提前谢谢您!

Answer 1

更正您使用的 queryTexte 而不是 queryText 的 id，并且在 jQuery 选择器中使用单引号代替双引号，如下所示:-

<button type="button" class="btn btn-primary" onclick="Search($('#queryTexte').val())">Search</button>

不要使用 type=submit 按钮，而是使用 type=button，如上所示。