jQuery不起作用？ 从mysql数据库检索数据而无需刷新页面

Question

我正在一个项目上，我当前正在尝试实现搜索功能，在用户在输入框中键入要搜索的内容后，他们将单击“搜索”按钮，然后数据将填充现有的表在我的页面上。 但是，我不希望用户单击搜索时刷新页面。

我的search.jsp上的搜索按钮

<button class="btn btn-success btn-labeled fa fa-search" type ="submit" name="action" value="search" id ="search" >Search</button> 

JavaScript / AJAX

  $('#search').click(function () {
            alert("phase 1");
            $search = document.getElementById("search").value;
            alert("phase 2");
            $.post("editAction", { search: $search; }, function (data) {
                alert("phase 3");
                $('#dt-data').html(data);
            });
            alert("phase 4");
        });

editAction.java是所有逻辑所在的地方，而dt-data是我要填充数据的表

运行代码后，警报不会显示，并且页面仍会刷新，但表中仍然填充了正确的结果。 我在这里做错了什么？ 任何帮助表示赞赏，我仍然是js和AJAX的新手

Answer 1

这是因为您使用的按钮的提交type ="submit"这可能会直接在同一页面上提交您的表单。 如下更改

<button class="btn btn-success btn-labeled fa fa-search" type ="button" name="action" value="search" id ="search" >Search</button> 

按以下方式修改函数

$("#search").on("click",function(){
            $search = $("#search").val();
            $.ajax({
                url: "editAction",
                type: "POST",
                data: { search: $search},
                success: function(data){
                    //do action  
                    alert("phase 3");
                    $('#dt-data').html(data);
                },
                error: function(){
                    // do action
                    alert("phase 4");
                }
            });
        });

Answer 2

尝试这个：

HTML：

<button class="btn btn-success btn-labeled fa fa-search" type ="submit" name="action" value="search" id ="search" >Search</button> 

JavaScript / AJAX：

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#search").on("click",function(){
            $search = $("#search").val();
            $.ajax({
                url: "editAction",
                type: "POST",
                data: { search: $search},
                success: function(data){
                    //do action  
                    alert("phase 3");
                    $('#dt-data').html(data);
                },
                error: function(){
                    // do action
                    alert("phase 4");
                }
            });
        });
    });
</script>