Javascript 可点击HTML列表查询数据库并输出到<；部门>；

容忍我；这是我的第一个问题。我写一个合适的算法有困难。也许所有这些都是为了“强制”，这意味着我把一个简单的概念复杂化了，但也很可能我只是不知道修复方法

我正在制作一本实验性的食谱，可以从数据库中读取并显示在浏览器中。我创建了一个列表（注意：不是

或

元素），该列表由数据库PDO查询生成的

项填充。这些范围引用数据库中每个配方的名称

<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生成的配方名称，并在

中显示所选配方。选择不同的配方不应导致页面重新加载

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

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

结论是我提出的方法太“肮脏”并为我指明了更好的方向的答案是完全可以接受的。我很乐意提供我遗漏的任何必要信息。事先非常感谢你

---

环境：虚拟灯（CentOS7，MariaDB）

试试这样的东西

<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>

$（文档）.ready（函数（）{
$（“body”）。在（“单击”、“重新命名”函数（）上{
//*获取所需配方的id
var recId=$（this.attr（“数据id”）；
//*向后端发送ajax请求
$.ajax（{
url:“/get recipe.php”，
方法：“获取”，
数据：{
id:recId
},
成功：功能（响应）{
//*将配方数据放入容器中
$（“#recWindow”）.html（回复）；
}
});
});
});

---

我希望，它向您展示了主要思想

试试这样的东西

<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>

$（文档）.ready（函数（）{
$（“body”）。在（“单击”、“重新命名”函数（）上{
//*获取所需配方的id
var recId=$（this.attr（“数据id”）；
//*向后端发送ajax请求
$.ajax（{
url:“/get recipe.php”，
方法：“获取”，
数据：{
id:recId
},
成功：功能（响应）{
//*将配方数据放入容器中
$（“#recWindow”）.html（回复）；
}
});
});
});

---

我希望，它向您展示了主要思想

您可以为span提供唯一的id，该id也是数据库中相应配方的id。然后通过jQuery将该span的onclick事件绑定到AJAX请求。AJAX请求将span的ID发布到一个PHP页面，该页面从DB中提取配方详细信息（基于传递的span ID），并将其返回到调用页面，您可以在该页面中填充DIV。我建议您查看一个基本的PHP/jQuery/AJAX教程。此外，我不确定您是否需要该教程：

我今天跳到了一个PHP/jQuery/AJAX教程中。我正在构建一个画布，以便在学习时使用，假设我有点偏离主题，希望解决这个问题。不过，我通过这种方式学得很快，咬得比我能嚼的多一点，然后再补上。php页面用于显示欢迎页面。我并不想在示例代码中包含它。谢谢你的回答，马克西姆斯！现在看看这些选项。您可以为跨度指定唯一的id，该id也是数据库中相应配方的id。然后通过jQuery将该span的onclick事件绑定到AJAX请求。AJAX请求将span的ID发布到一个PHP页面，该页面从DB中提取配方详细信息（基于传递的span ID），并将其返回到调用页面，您可以在该页面中填充DIV。我建议您查看一个基本的PHP/jQuery/AJAX教程。此外，我不确定您是否需要该教程：

我今天跳到了一个PHP/jQuery/AJAX教程中。我正在构建一个画布，以便在学习时使用，假设我有点偏离主题，希望解决这个问题。不过，我通过这种方式学得很快，咬得比我能嚼的多一点，然后再补上。php页面用于显示欢迎页面。我并不想在示例代码中包含它。谢谢你的回答，马克西姆斯！现在看看这些选项。我认为您还需要为AJAX请求指定一个方法类型（post/get）。哦，我已经非常喜欢这个了！让我实现它并构建get_recipe函数，这样我就可以跟上这个过程了。我对很多东西还是很陌生，但逻辑是清楚的。有点令人沮丧的是，我没有想到将配方id键作为每个项目的html id传递。哈哈，非常感谢你，Br3t。我会将您的答案标记为已接受。Maximus2012，谢谢。作为一个新手，我喜欢坚持使用POST仅仅是出于安全原因，因为这是我第一次学习。我将很快在那里扩展我的知识。我认为您还需要为AJAX请求指定一个方法类型（post/get）。哦，我已经非常喜欢这个了！让我实现它并构建get_recipe函数，这样我就可以跟上这个过程了。我对很多东西还是很陌生，但逻辑是清楚的。有点令人沮丧的是，我没有想到将配方id键作为每个项目的html id传递。哈哈，谢谢你