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

【问题标题】：Using a send button in a GET request in jQuery在 jQuery 的 GET 请求中使用发送按钮
【发布时间】：2015-02-21 06:14:38
【问题描述】：

我正在使用 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 请求。

提前谢谢你！

【问题讨论】：

chnnge 按钮类型提交到 type="button"。

标签： javascript jquery forms get

【解决方案1】：

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

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

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

【讨论】：

现在谢谢你，至少我成功地得到了里面的文本，但是当我点击按钮时我的页面会重新加载。我会更新我的问题！
@Othmane..您正在使用提交按钮而不是使用type=button，如我的回答所示。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：