Question

我有一个场景，在页面加载时，显示div：none;当我按下按钮-A时，它会切换div。此div充当搜索div窗口，最终用户可以在其中搜索数据库。但是因为显示div：none;当我在搜索div窗口上提交表单时，它会重新加载页面并返回默认显示搜索div窗口：none;

因此，数据调用实际执行并返回我需要的行。但是我需要再次按下按钮-A才能显示包含结果的div。

有解决方法吗？我已经阅读了一些关于ajax的内容，但我还没有为我的案例找到一个有效的解决方案。

我有类似的东西。（很抱歉不知道发布时的格式好。我第一次在这里发帖。）

-(instancetype)init{
    if (self == [super init]) {
       UIView *myLeftView=[[UIView alloc]initWithFrame:CGRectMake(0, 0,[UIScreen mainScreen].bounds.size.width/3,[UIScreen mainScreen].bounds.size.height)];
    myLeftView.backgroundColor=[UIColor colorWithRed:26/256.f green:31/256.f blue:36/256.f alpha:0.7];
    UIButton *accessButton=[[UIButton alloc]initWithFrame:CGRectMake(0, 20, myLeftView.bounds.size.width, 44)];
//    [accessButton setImage:[UIImage imageNamed:@"Menu_Avatar"] forState:UIControlStateNormal];
//    [accessButton setTitle:@"access" forState:UIControlStateNormal];
    [self setUpButton:accessButton withImage:@"Menu_Avatar" title:@"access"]; 
    }
return self ;
}

Answer 1

$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});
 
jQuery("#result").on("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find(\'.name\').html();
    var decoded = $("<div/>").html($name).text();
    $(\'#searchid\').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$(\'#searchid\').click(function(){
    jQuery("#result").fadeIn();
});
});

<div class="form-group">
<input type="text" placeholder="search by name" name="search_text" class="form-control search" id="search_text"></div>
<div id="result"></div>

<!-- search.php--->
<?php 
$conn = mysqli_connect("localhost", "root", "", "insert");
$output = "";
$sql = "SELECT * FROM inserdata WHERE name LIKE '%".$_POST['search']."%'";

$result = mysqli_query($conn,$sql);
if(mysqli_num_rows($result) > 0)
{
	$output .= '<h4 align="center">Search Result</h4>';  
    $output .= '<div class="table-responsive">  
					<table class="table table-bordered">  
						<tr>  
                            <th>Name</th>  
                            <th>Email</th>  
                            <th>Phone Number</th>  
                            <th>Address</th>  
                            <th>Gender</th>  
                            <th>Desc</th>  
                        </tr>'; 
	while($row = mysqli_fetch_array($result))
	{
		 $output .= '  
                <tr>  
                    <td>'.$row["name"].'</td>  
                    <td>'.$row["email"].'</td>  
                    <td>'.$row["phn"].'</td>  
                    <td>'.$row["address"].'</td>  
                    <td>'.$row["gender"].'</td>  
                    <td>'.$row["desc"].'</td>  
                </tr>  
           '; 
	}
	echo $output;
}
else {
	echo "data not found";
}
?>

Answer 2

您可以在加载后检查是否有任何结果。如果有任何

，则显示search_div_wrapper

var $ = jQuery;
$(window).load(function(){
    if($('.result_div_wrapper').html().trim().length > 0) {
        console.log($('.result_div_wrapper').html().trim().length)
        $('.result_div_wrapper').toggleClass('active');
    }       
});

并将其添加到您的css

.active{
    display: block !important;
}
.result_div_wrapper{
    display: none;
}

提交没有页面重新加载的表单

2 个答案: