开发者社区> 问答> 正文

在我点击我的电子商务网站上的搜索按钮后,我怎样才能阻止页面重新加载?

已解决

问题是搜索按钮发挥了它的功能。页面应该只显示与产品关键字匹配的产品,它只显示与相关关键字匹配的产品,但它显示0.1毫秒,然后重新加载以显示整个页面。但是,如果我只点击一个类别标签,即床/沙发(在我的情况下)。它只是向我展示了床或沙发的产品,而没有重新加载。这和我想要的搜索按钮是一样的。编辑:我试过了预防故障并且它不工作请参见下面的相关代码:

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

展开
收起
sossssss 2019-12-31 20:10:34 2847 0
1 条回答
写回答
取消 提交回答
  • 采纳回答

    请确保执行“防止默认值”,并将按钮设置为禁用,这样用户就不能再次单击,收到响应后,请将按钮设置为重新启用

    $("#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);
            }
        })
        }
    })
    
    2019-12-31 20:11:33
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
阿里云搜索产品年度升级发布 立即下载
SEO学习步骤 立即下载
QQ移动页面框架优化实践 立即下载