Javascript 在我点击电子商务网站上的搜索按钮后，如何阻止页面重新加载？

任何帮助都将不胜感激

问题是“搜索”按钮无法正常工作。页面应仅显示与产品关键字匹配的产品，并且仅显示与相关关键字匹配的产品，但显示时间为0.1 ms，然后重新加载以显示整个页面。但是，如果我只单击一个类别选项卡，即我的案例中的床/沙发。它只是向我展示了床或沙发等产品，不需要重新装填。这和我想要的搜索按钮是一样的。 编辑：我尝试了默认设置，但它不起作用 请参见以下相关代码：

index.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>

action.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>  
            ";
        }
    }

main.js

$("#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);
                }
            }
        })
        }
    })

---

您已经提到按钮类型为submit。把它做成按钮

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

---

请确保执行“防止默认设置”，并将按钮设置为禁用状态，以便用户无法再次单击。在收到响应时，请将按钮设置回启用状态

$("#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);
        }
    })
    }
})

---

我试过了。它不起作用。非常感谢您的回复。您认为它不起作用是什么意思？你有什么错误吗？没有，先生，它只是重新加载页面。谢谢先生，我将尝试一下。如果这有助于你的要求，请将其标记为正确答案，并添加e.preventDefault；在你的点击功能中是的，它起作用了。非常感谢，先生。我真的很感激。你试过了吗？是的，连同最重要的答案，它起作用了。非常感谢。我真的很感激。