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

Question

我已经在我的网站中实现了this 代码。此代码可帮助我在同一页面上以 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

您需要将 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);
    }
    });
});

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