单击电子商务网站中的搜索按钮后，如何阻止页面重新加载？

Question

任何帮助将非常感激？

问题是搜索按钮发挥了它的作用。 该页面应该只显示与产品关键字匹配的产品，它只显示与相关关键字匹配的产品，但显示时间为 0.1 毫秒，然后重新加载以显示完整页面。 但是，如果我只单击一个类别选项卡，即床/沙发（就我而言）。 它只是向我展示了床或沙发的产品，并且不会重新加载。 这与我想要的搜索按钮相同。 编辑：我尝试过preventDefault但它不起作用请参阅下面的相关代码：

索引.php

<form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search" id="search">
                </div>
                <button type="submit" class="btn btn-primary" id="search_btn"><span class="glyphicon glyphicon-search"></span></button>
</form>

动作.php

if(isset($_POST["get_seleted_Category"]) || isset($_POST["selectBrand"]) || isset($_POST["search"])){
    if(isset($_POST["get_seleted_Category"])){
        $id = $_POST["cat_id"];
        $sql = "SELECT * FROM products WHERE product_cat = '$id'";
    }else if(isset($_POST["selectBrand"])){
        $id = $_POST["brand_id"];
        $sql = "SELECT * FROM products WHERE product_brand = '$id'";
    }else {
        $keyword = $_POST["keyword"];
        $sql = "SELECT * FROM products WHERE product_keywords LIKE '%$keyword%'";
    }

    $run_query = mysqli_query($con,$sql);
    while($row=mysqli_fetch_array($run_query)){
            $pro_id    = $row['product_id'];
            $pro_cat   = $row['product_cat'];
            $pro_brand = $row['product_brand'];
            $pro_title = $row['product_title'];
            $pro_price = $row['product_price'];
            $pro_image = $row['product_image'];
            echo "
                <div class='col-md-4'>
                            <div class='panel panel-info'>
                                <div class='panel-heading'>$pro_title</div>
                                <div class='panel-body'>
                                    <img src='product_images/$pro_image' style='width:160px; height:250px;'/>
                                </div>
                                <div class='panel-heading'>$.$pro_price.00
                                    <button pid='$pro_id' style='float:right;' id='product' class='btn btn-danger btn-xs'>AddToCart</button>
                                </div>
                            </div>
                        </div>  
            ";
        }
    }

主文件

$("#search_btn").click(function(){
        $("#get_product").html("<h3>Loading...</h3>");
        var keyword = $("#search").val();
        if(keyword != ""){
            $.ajax({
            url     :   "action.php",
            method  :   "POST",
            data    :   {search:1,keyword:keyword},
            success :   function(data){ 
                $("#get_product").html(data);
                if($("body").width() < 480){
                    $("body").scrollTop(683);
                }
            }
        })
        }
    })

Answer 1

您已将按钮类型称为“提交”。 将其设为“按钮”。

 <button type="button" class="btn btn-primary" 
  id="search_btn"><span class="glyphicon glyphicon- 
  search"></span></button>

Answer 2

确保执行阻止默认设置并将按钮设置为禁用，以便用户无法再次单击，在响应接收时将按钮设置回启用

$("#search_btn").click(function(e){
    e.preventDefault();
    $("#search_btn").attr("disabled", true);    

    $("#get_product").html("<h3>Loading...</h3>");
    var keyword = $("#search").val();
    if(keyword != ""){
        $.ajax({
        url     :   "action.php",
        method  :   "POST",
        data    :   {search:1,keyword:keyword},
        success :   function(data){ 
            $("#get_product").html(data);
            if($("body").width() < 480){
                $("body").scrollTop(683);
            }
            $("#search_btn").attr("disabled", false);
        }
    })
    }
})