从数据库创建可单击列表，并在网页元素中返回相关的数据库字段数据

Creating a clickable list from DB and returning relevant DB field data in a web page element

本文关键字：数据库 返回 数据 字段 元素 单击 创建 列表 网页      更新时间：2023-09-26

我正在尝试使用客户端（Javascript）可点击列表从数据库中获取记录。问题是我希望可点击的链接首先来自数据库中的数据（MySQL）。

我在传递数据以创建可点击列表时遇到问题。我已经尝试了各种想法，并遇到了与客户端和服务器端编程有关的绊脚石（并简要研究了JQuery，但似乎很难做到）。我一直在尝试使用HTML，PHP，Javascript，JQuery（简短）和MySQL。

所以我需要选择post_id，post_title FROM 帖子并使post_title在列表中可点击，但使用关联的post_id在数据库中查找相关数据，并通过 innerHTML 将其发布到另一个元素中。有什么想法吗？

index.php <- List

<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
<?php
$sql = 'SELECT post_id AS "id", post_title AS "title" FROM posts';
$posts = $mysqli->query($sql);
?>
<ul id="post_list">
<?php
foreach ($posts as $post) {
?>
    <li><a href="#" data-id="<?php echo $post['id'] ?>"><?php
        echo $post['title']
    ?></a></li>
<?php
}
?>
</ul>
<div id="post_content"></div>
</body>
</html>

脚本.js <- 交互性（需要 jquery）

$(document).ready(function() {
    $('#post_list').on('click', 'li a', function() {
        $('#post_content').load('get_post.php?id=' + $(this).data('id'));
    });
});

get_post.php <- 选定的帖子

<?php
if (!empty($_GET['id'])) {
    $sql = 'SELECT * FROM posts WHERE post_id = '.$_GET['id'].'';
    $res = $mysqli->query($sql);
    if (($post = $res->fetch_assoc())) {
?>
<h1><?php echo $post['post_title'] ?></h1>
<p><?php echo $post['post_body'] ?></p>
<div class="pull-right"><?php echo $post['post_author'] ?></div>
<?php
    } else {
        header("HTTP/1.0 404 Not Found");
        die();
    }
}
?>

也许我没有正确理解，但这可以解决您的问题：

您至少需要 2 个文件（如果将 Js 代码分开，则为 3 个）

索引.php ： 

$arrayItems = array()//The array containing your datas from the database
echo '<div id="listItems">';
for($i = 0; $i < count($arrayItems); $i++){
    echo '<div class="item" idFromDB="'.$arrayItems[$i]['post_id'].'">'.$arrayItems[$i]['post_title'].'</div>';
}
echo '</div>';
echo '<div id="containerDetailsItem"></div>';

javascript.js ： （哪个更像是Jquery）

$(document).ready(function() {
    $('.item').live('click', function(){
        $('#containerDetailsItem').load('myAjax.php?idItem='+$(this).attr('idFromDB'));
    });
});

和 ajax 文件 （myAjax.php）：

if(isset($_GET['idItem']) && $_GET['idItem'] != ''){
    $idItem = (int)$_GET['idItem'];
    //Get the infos from the database with the ID given
    echo 'datas from BDD';
}

我认为这将满足你的需要。这是使用Jquery和Ajax的简单PHP。

PS ：只有缩小的代码。你需要包括Jquery（也许来自谷歌），并在index.php和Javascript之间建立链接.js

相关文章：