php - 如何使用 php ajax 和 mysql 动态更改内容

Question

我创建了一个页面，使用数据库表用链接(类别)填充侧边栏。该表包含名称(类别名称)及其 ID。

     e.g 
           | **id** |**name**|
           |  1     |  Men   |
           |  2     |  Women |

我需要做以下事情:

• 当点击链接时，相应的 h1 标签会将其值更改为 链接的名称(类别名称)。

• 在 h1 标签下方显示产品图片的 div 标签也会发生变化。我创建了一个表来保存产品数据。它包含以下数据字段:

     **id**(id for the product)-INT[PRIMARY KEY]
     **category_id**(category id)-INT[FOREIGN KEY]
     **name**(product name)-VARCHAR
     **image**(image file name e.g "blu_dress.png" )
  
     e.g 
   | **id** |**categoty_id**|   **name**  |   **image**  |
   |  1     |       2       |black blouse |bla_blouse.png|
   |  2     |       2       |  blue dress | blu_dress.png|
   |  3     |       1       | brown shirt | bro_shirt.png|
   |  4     |       2       | blue blouse |blu_blouse.png|
  

填充侧边栏的 PHP 代码

    <?php 
$dynamicList = "";

$sql = mysql_query("SELECT * FROM categories ORDER BY id ASC");

$productCount = mysql_num_rows($sql); // count the output amount

if ($productCount > 0) 
{
    while($row = mysql_fetch_array($sql)){ 
             $id = $row["id"];
             $category_name = $row["name"];
             $sql2 = mysql_query("SELECT * FROM categories WHERE id='".$id."'");
             $dynamicList .= '

                <li id="categegoryLink">
                    <a href="category.php?ID="'$category_name.'"" onclick="">   
                         '.$category_name.'
                    </a>
                </li>

                ';
    }
} 
else 
{
    $dynamicList = "We have no categories listed in our store yet";
}
mysql_close();
?> 

AJAX 代码

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("title").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","category.php",true);
xmlhttp.send();
}
</script>

category.php

<?php echo $category_id?>

更多信息 我无法发布图像，因为我没有声誉，但我有一张图像可以进一步解释我需要什么(如果您需要的话)。

Answer 1

我建议使用jQuery，对于数据库使用PDO，而不是使用mysql。填充的侧边栏数据显示为列表。

$options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);

$db = new PDO('mysql:host=localhost;dbname=data','root', 'passwd', $options);
$sql = $db->query("SELECT * FROM categories ORDER BY id ASC"); // you can also use prepared statement.
 // displaying categories 
<ul id="category">
   <?php foreach ($sql as $category) : ?>
      <li data-id="<?php echo $category['category_id']; ?>"><?php echo $category['name']; ?></li>
   <?php endforeach; ?>
 </ul>
 <div id="results"></div>

并在 jQuery 中检查单击的列表项

$("#category li").click(function() {
           var id = $(this).data('id');
          $.post('get.php',{category_id:id},function(data){
              $('#results').html(data);
          });
     }); 

get.php 文件的代码

<?php
$options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION);

$db = new PDO('mysql:host=localhost;dbname=data','root', 'passwd', $options);
$sql = $db->query("SELECT * FROM categories ORDER BY id ASC"); // you can also use prepared statement.
 if(isset($_POST['category_id'])){
$id = $_POST['id'];
$category = $db-query("SELECT * FROM categories WHERE id = $id");
}
 ?>
  <h1><?php    echo $category['name']; ?></h1>

    <!--display the results of the query here-->

这里，当用户点击任何列表项时jQuery将获取data-id属性0f的值，即类别的id，发布这个值到 get.php 文件并根据类别 id 从数据库中选择数据。并从数据库返回结果。返回的数据附加到 id 为 results 的 div 中。