我有一个搜索栏，供用户输入查询。点击“搜索”后，应显示查询结果的模式信息。
我在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">×</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);
?>
答案 0 :(得分：0)
<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">×</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);
?>
答案 1 :(得分：0)
这是一个工作代码。 我已经修改了您的代码。添加了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">×</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);
?>