以模态显示搜索栏中的查询

我有一个搜索栏供用户输入查询。单击"搜索"后，应显示一个带有查询结果的模态。

我的index.php输出仍然没有显示在模态中。当我点击"搜索"时，模态会弹出一个空体如何从index.php获得输出以显示在模态的主体中

我的剧本有问题吗？我需要在模态体中添加一些内容吗？

index.php

<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search" data-toggle="modal" data-target="#mymodal">
</form>
</body>
<script>
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-content .modal-body').html(e);
});
});
</script>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

search.php

<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>

这是一个工作代码。。我修改了你的代码。添加了CDN以使用引导模式和jquery。。并添加了对后端的ajax调用。我还注释掉了您的数据库变量，并替换为伪变量。。

search.html

<html>
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" id="name" placeholder="Enter query"/>
<input type="button" name="search" id="submit" value="Search" data-toggle="modal" data-target="#mymodal">
</form>

<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">  
// Ajax post  
$(document).ready(function(){  
$("#submit").click(function(){  
var name = $("#name").val();  
// Returns error message when submitted without req fields.  
if(name=='')  
{  
alert("error");  
}  
else  
{  
// AJAX Code To Submit Form.  
$.ajax({  
type: "POST",  
url:  "http://localhost:8079/test/search.php",  
data: {name: name},  
cache: false,  
success: function(result){  
if(result!=0){
console.log(result);
// On success redirect.  
$('#mymodal').modal('show');
$('#mymodal:visible .modal-content .modal-body').html(result);  
}  
else { 
//error
alert("error");
}
}  
});  
}  
return false;  
});  
});  
</script> 
</html>

search.php

<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
$output="";
// include_once('db.php'); //Connect to database
if(isset($_POST['name'])){
// $q = $_POST['q'];
//get required columns
/*$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error*/
$count = 2;
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
$output .= '<h2>Test</h2><br>';
$output .= '<h2>Test2</h2><br>';
$output .= '<h2>Test3</h2><br>';
//$audio_name = $row['audio'];
//  $output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
echo $output;
}else{
echo "Error";
}
// mysqli_close($conn);
?>

<head>
<title>Search</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="#">
<input type="text" name="q" placeholder="Enter query"/>
<input type="button" name="search" value="Search">
</form>
<button data-toggle="modal" data-target="#mymodal" id="showModal" style="display:none;"></button>
<!-- The Modal -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$("body").on("click",'[name="search"]',function(e){
e.preventDefault() 
$.post( 'search.php', { q : $('input[name="q"]').val()},function(e){
// then show the modal first
$('#mymodal:visible .modal-body').html(e);
$('#showModal').trigger('click');
// then put the results there
});
});
</script>


<!--search.php-->
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); 
if(isset($_REQUEST['q'])){ // you are using get method in ajax call but in this page you were using $_POST['q'] which is invalid
$q = $_REQUEST['q'];     // you should either use $_GET['q'] or you could use $_REQUEST['q']. $_REQUEST will work on both $.get method and $.post method of jquery ajax call function 
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%".$q."%' OR `yupikWord` LIKE '%".$q".%'") or die(mysqli_error($conn)); // you should not use variable in the double quote or single quote. but using in between the quotes will not return any error or warning. but as per my opinion you should not use in between 
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= '<td><audio src="audio/'.$audio_name.'" controls="control">'.$audio_name.'</audio></td>';
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>

相关内容

最新更新

热门标签：