引导模式不显示数据库搜索结果

Question

我已经在我的网站上实现了这段代码。这段代码帮助我以Bootstrap模式在同一页面上获得搜索结果，而无需访问浏览器中的另一个页面。

一切正常：除了我在search.PHP中的PHP代码外，模态出现了，关闭了。我运行console.log来查看我从search.PHP中得到了什么数据，我只得到了HTML代码，PHP代码被排除在外。我在想，也许是我写错了代码，也许括号的位置不好，但我已经尝试过我脑海中的任何解决方案。

index.php

$("#searchForm").submit(function(e) {
// Avoid to execute the actual submit of the form.
e.preventDefault();
var searchForm = $(this);
var searchData = searchForm.serialize(); // Serialize the form's elements.
var searchURL = "map/search.php";
$.ajax({
type: "POST",
url: searchURL,
cache: false,
data: searchData,
success: function(data) {
$("#searchModal .modal-content").html(data);
$("#searchModal").modal('show');
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});

console.log/alert((：

<!-- search_modal_content -->
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title">Rezultate cautare</h4>
</div>
<div class = "modal-body">
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Inchide</button>
</div>
</div>

<script type = "text/javascript">
$('.close, .btn-danger').click(function() {
$("#searchModal" ).modal('hide');
});
</script>

search.php

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once __DIR__ . '../../config/config.inc.php';
?>
<!-- search_modal_content -->
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title">Rezultate cautare</h4>
</div>
<div class = "modal-body">
<?php 
if(isset($_POST['submit'])) {
$searchValue = $_POST['search'];

$search_result = mysqli_query($link, "SELECT * FROM clubajj WHERE Nume or ADRESA LIKE '%$searchValue%'");
$count = mysqli_num_rows($search_result);
if($count < 1) {
echo '<p class = "text-align-center font-weight-bold">Nu s-a gasit niciun rezultat care sa corespunda cu cautarea dumneavoastra.</p>';
} else { 
?>
<table class = "table table-responsive table-inverse table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nume</th>
<th>Judet</th>
<th>Adresa</th>
</tr>
</thead>
<?php while($row = mysqli_fetch_assoc($search_result)) {
?>
<tbody>
<tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['Nume']; ?></td>
<td><?php echo $row['Judet']; ?></td>
<td><?php echo $row['Adresa']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
<?php } ?>
</div>
<?php } mysqli_close($link); ?>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Inchide</button>
</div>
</div>

<script type = "text/javascript">
$('.close, .btn-danger').click(function() {
$("#searchModal" ).modal('hide');
});

<form class = "d-flex" id = "searchForm" method = "POST">
<input class = "form-control me-2" type = "text" placeholder = "Cautare" aria-label = "Cautare" name = "search">
<button class = "btn btn-outline-success" type = "submit" name = "submit" data-toggle = "modal" data-target = "#searchModal">Cauta</button>
</form>

Answer 1

YOu需要将search.php中的所有html代码移动到index.php。您的搜索控制器仅响应json数据。在下面的js请求中，当从搜索结果中获得响应数据时，将json渲染为html。

$.ajax({
type: "POST",
url: searchURL,
cache: false,
data: searchData,
success: function(data) {
$("#searchModal .modal-content .table tbody").html("");
for(let i = 0; i < data.length; i++){
//insert each table row here:  
//$("#searchModal .modal-content .table tbody").append(".....");
//your data row is: data[i];
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});

希望这个解决方案能帮助到你。