Question

忍受我;这是我的第一个StackOverflow问题。我在编写正确的算法时遇到了麻烦。也许这样做是为了强迫＆＃34;强迫＆＃34;这意味着我过于复杂化一个简单的概念，但我也很可能不知道修复。

我正在构建一个从数据库中读取并在浏览器中显示的实验性食谱。我创建了一个列表（注意：不是<ul>或<ol>元素），该列表由PDO查询生成的<span>项填充到数据库。这些跨度引用数据库中每个配方的名称。

<p>
    <?php

    $recList = $pdo->query('SELECT name FROM Recipe');
    $rowCount = $recList->rowCount();
    echo 'There are ' . $rowCount . ' recipes currently in our database!';
    echo '<br /><br />';
    while ($row = $recList->fetch()) {
        echo '<span class="recName"';
        echo '>' . $row['name'] . "</span><br />";
    }

    ?>
</p>

然后我创建了一个滚动的div元素：

<div id="recWindow">
    <!-- Display recipe queried from the database here -->
    <?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>

我希望用户能够点击php生成的食谱名称和所选配方，以便在<div>中显示。选择不同的食谱不应该导致页面重新加载。

我觉得答案在于对一个php文件的AJAX请求，该文件正在侦听包含要显示的配方的变量，但这就是我被困的地方。不知何故，我需要将php列表项传递给javascript识别的唯一标识符，javascript又通过将该标识符传递给php来查询数据库来处理div中的onclick更改。打字时，我几乎可以肯定我已经过度复杂了整个过程。

我想过使用下拉选择菜单和GET请求，但如果可能的话，我想保留可点击名称功能。

结论我提出的方法的答案太过严格＆＃34;脏＆＃34;并指出我在一个更好的方向是完全可以接受的。我很乐意提供我遗漏的任何必要信息。非常感谢你。

环境：虚拟LAMP（CentOS7，MariaDB）

Answer 1

尝试这样的事情

<p>
    <?php

    $recList = $pdo->query('SELECT name FROM Recipe');
    $rowCount = $recList->rowCount();
    echo 'There are ' . $rowCount . ' recipes currently in our database!';
    echo '<br /><br />';
    while ($row = $recList->fetch()) {
        echo '<span class="recName" data-id="' . $row['id'] . '"';
        echo '>' . $row['name'] . "</span><br />";
    }

    ?>
</p>
<div id="recWindow">
<!-- Display recipe queried from the database here -->
<?php require("$DOCUMENT_ROOT/$rec_source"); ?>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("body").on("click", "recName", function() {
            //* get id of required recipe
            var recId = $(this).attr("data-id"); 
            //* send ajax-request to back-end
            $.ajax({ 
                url: "/get-recipe.php",
                method: "GET",
                data: {
                    id: recId
                },
                success: function(respond) {
                    //* put recipe-data into container
                    $("#recWindow").html(respond); 
                }
            });
        });
    });
</script>

我希望，它会向您展示主要想法

可点击的HTML列表，用于查询数据库并输出到<div>

1 个答案: