Question

我正在使用jQuery向我的服务器发送请求，然后呈现结果。但是，现在我想使用一个按钮，这样只有在点击发送按钮后才会发送请求，而不像我之前使用＆＃34; onkeyup＆＃34;这是无法控制的;因为我想在完成输入我的请求后发送请求，而不是之前。

         <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的{{1}}而不是双引号使用jQuery选择器中的单引号，如下所示： -

queryText

而不是使用<button type="button" class="btn btn-primary" onclick="Search($('#queryTexte').val())">Search</button>按钮使其成为type=submit，如上所示。

Answer 2

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

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

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

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

Answer 3

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>

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

3 个答案: