Показать информацию о книге из mysql-php

Question

Мне очень нужна помощь.

Моя проблема теперь в том, что я хочу отобразить детали книг, данные которых находятся в mysql.

Сообщаю шаг за шагом.

1. У меня есть таблица книг в MySQL

2. из таблицы, я назвал название и цену, используя 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>"; 

} 

?> 

1. Здесь начало проблемы. Я хочу отобразить детали книги (автор, издатель, descrp и т. Д.), Когда пользователь нажимает на список выше (шаг 2). Так может ли кто-нибудь дать мне идею о том, как я могу это сделать? Как сделать список книг доступным для клика, а затем отобразить детали.

пример:

пользователя нажмите на ListView; Название: One, Подробная информация о книге всплывает или загружается.

Думаю, мне нужно использовать 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 />"; 
?> 

ТАКЖЕ

Еще одна сторона примечания заключается в том, что вам следует избегать использования синтаксиса or die() в скрипте PHP, который генерирует ваш HTML. По каким-либо причинам см. this link.

Answer 2

Если вы знакомы с jQuery, то есть 2 простых способа выполнить это! Существует версия 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>