在 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

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

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

而不是使用 type=submit 按钮，将其设为 type=button，如上所示。

Answer 2

HTML:

<input id="queryTexte" type="text" /><br>

jQuery:

<script>

jQuery(document).ready(function($){

    $('.btn-primary').click(function(){

    var query_text = $('#queryTexte').val();

            $.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>

Answer 3

我会做这样的事情来保持 JS 和 HTML 分离并避免引用问题：

$("button").on("click", function(){
    Search($("#queryTexte").val());
});

如果您的脚本在 DOM 元素之前加载，请像这样包装它以等待 DOM 准备就绪：

$(function){
    $("button").on("click", function(){
        Search($("#queryTexte").val());
    });
});

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

Using a send button in a GET request in jQuery

javascript

forms

jquery

get