顯示來自mysql-php的書的詳細信息

Question

我真的需要幫助。

我現在的問題是我想顯示書籍的詳細信息，其中的數據是從MySQL。

我告訴你一步一步來。

1. 我在MySQL的

2. 桌書從表中，我打電話使用PHP的標題和價格，這顯示是這樣的：

標題：一 價格：20 $

---

標題：Two 價格：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>"; 

} 

?> 

1. 這裏的問題開始。當用戶點擊上面的列表（步驟2）時，我想顯示書籍的詳細信息（作者，出版者，descrp等）。所以任何人都可以給我這個想法，我該怎麼做？如何使書籍列表可用於點擊，然後顯示詳細信息。

例如：

用戶點擊列表視圖;標題：一， 有關該書的彈出或加載的詳細信息。

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

希望這裏的會員能幫忙。非常感謝 ！

Answer 1

你應該包裝中的每本書<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 />"; 
?> 

ALSO

另一個方面是，您應該避免在生成HTML的PHP​​腳本中使用or die()語法。出於某些原因，請參閱this link。

Answer 2

如果你熟悉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>