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

【问题标题】：How to dynamically change content with php ajax and mysql如何使用 php ajax 和 mysql 动态更改内容
【发布时间】：2015-09-02 18:07:38
【问题描述】：

我创建了一个页面，该页面使用数据库表填充带有链接（类别）的侧边栏。该表包含名称（类别名称）及其 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?>

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

【问题讨论】：

我在这里没有看到任何 AJAX，您是否浏览过教程并遇到了特定问题？
是的，但我不得不完全放弃它。
为什么？您应该说明您遇到的问题以及您拥有/拥有的代码。从头开始为您编写代码不适合本网站。这是一个可能有用的页面，learn.jquery.com/ajax。
我很欣赏这个链接，我不是要从scrath 获得代码。我正在考虑使用此代码
我只需要一些方法来在单击链接时返回 category_id 的值。我不知道我是不是要求太多了。

标签： php mysql ajax

【解决方案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 中。

【讨论】：