问题是搜索按钮发挥了它的功能。页面应该只显示与产品关键字匹配的产品,它只显示与相关关键字匹配的产品,但它显示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);
}
}
})
}
})
请确保执行“防止默认值”,并将按钮设置为禁用,这样用户就不能再次单击,收到响应后,请将按钮设置为重新启用
$("#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);
}
})
}
})
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。