Question

我真的需要帮助。

我现在的问题是我想显示书籍详细信息，数据来自mysql。

我一步一步地说。

我在mysql中有表格书
，我使用php调用标题和价格，显示如下：

标题：一价格：20美元

标题：两个价格：35美元

我的PHP代码是：

<?php

$db_host="localhost";
$db_username="root";
$db_pass="";
$db_name="";

@mysql_connect("$db_host","$db_username","$db_pass") or die("Could not connect to database.");

@mysql_select_db("$db_name") or die("No database");


$q=mysql_query("SELECT * FROM books ");

while($result = mysql_fetch_array( $q )) 
 {

 echo "<b>Title:</b> ".$result['title'] . " <br> ";
 echo "<b>Price:</b> RM".$result['price_myr'] ."<br>"; 
 echo "<br>";

 }

?>

这里问题开始了。当用户点击上面的列表时，我想显示书籍详细信息（作者，出版商，descrp等...）（步骤2）。所以有人能告诉我如何做到这一点？如何使图书清单可供点击，然后显示详细信息。

示例：

用户点击listview;标题：一，关于图书弹出或加载的详细信息。

我想我需要使用Ajax，但我不知道如何。

Answer 1

如果您熟悉jQuery，有两种简单的方法可以实现它！有Ajax版本（更酷，但更复杂）和简单的显示/隐藏。

1.在您的mysql语句中，确保您拥有要显示的所有详细信息。创建一个可以像这样选择css的周围标签。

//From your code
while($result = mysql_fetch_array( $q )) 
{
    echo "<div id='book-{$result['id']}'class='book-info'>
        echo "<b>Title:</b> ".$result['title'] . " <br> ";
        echo "<b>Price:</b> RM".$result['price_myr'] ."<br>"; 
        echo "<div class='book-details'>
            echo "here is some details<br/>"; 
            echo "here is more details"; 
        echo "</div>" 
    echo "</div>"
    echo "<br>";
}

现在在javascript中执行此操作

$(".book-info").click(function() {
    $(".book-details", $(this)).toggle();
})

当然，让书籍细节开始隐藏。

<style>
    .book-details{display:none}
</style>

Answer 2

您应该将每本书都装在<div>标签中，并为每本书创建一个onclick函数。

是否预先加载信息或按需提取信息取决于您。如果页面上列出了大量书籍，预加载信息可能会导致性能问题，因此最好通过AJAX按需加载书籍信息。

使用AJAX，您的代码可能是这样的：

// styling should be done in a CSS file, but for the simplicity of the example, including it inline
echo "<div id=\"divBookInfo\" style=\"display:none; position:fixed; bottom:0; right:0;\">
    </div>\n";

$q = mysql_query("SELECT title, price_myr FROM books");

while ($result = mysql_fetch_array($q))
{
    echo "<div onclick=\"showBookInfo({$result["bookID"]})\">
            <b>Title:</b> {$result["title"]} <br />
            <b>Price:</b> {$result["price_myr"]} <br />
        </div>\n";
}

你的JavaScript函数：

function showBookInfo(bookID)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
    else
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("divBookInfo").innerHTML = xmlhttp.responseText;
            document.getElementById("divBookInfo").style.display = "block";
        }
    }
    xmlhttp.open("GET", "getBookInfo.php?bookID="+ bookID, true);
    xmlhttp.send();
}

<强> getBookInfo.php：

<?php

$db_host="localhost";
$db_username="root";
$db_pass="";
$db_name="";

@mysql_connect($db_host, $db_username, $db_pass) or die("Could not connect to database.");

@mysql_select_db($db_name) or die("No database");

$q = mysql_query("SELECT author, publisher, description, ... FROM books WHERE bookID = '". mysql_real_escape_string($_GET["bookID"]) ."'");

list($author, $publisher, $description, ...) = mysql_fetch_row($q);

echo "<b>Author:</b> {$author} <br />
    <b>Publisher:</b> {$publisher} <br />
    <b>Description:</b> {$description} <br />";
?>

同时

另一个侧面是，您应该避免在生成HTML的PHP脚本中使用or die()语法。有以下原因，请参阅this link。

从mysql-php显示书籍详细信息

2 个答案: