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

Question

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

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

所以我需要 SELECT post_id, post_title FROM posts 并使 post_title 在列表中可点击但使用关联的 post_id 在数据库中查找相关数据，然后 post 通过 innerHTML 将其放入另一个元素中。有什么想法吗？

Answer 1

可能是我理解的不正确，但是可以解决你的问题:

你至少需要2个文件（分离Js代码需要3个）

Index.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';
}

而且我认为这将满足您的需要。这很简单 PHP 与 Jquery 和 Ajax.

PS ：只有缩小的代码。您需要包含 Jquery（可能来自 google）并在 index.php 和 Javascript.js

之间制作 link

Answer 2

index.php <- 列表

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

script.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 <- 已选择 post

<?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();
    }
}
?>

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

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

javascript

php

jquery

mysqli