單擊電子商務網站中的搜索按鈕后，如何阻止頁面重新加載？

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);
        }
    })
    }
})