PHP 数据库在具有不同 anchor 标记的相同字段中显示

Question

我四处搜寻以查看是否可行，但一无所获。首先，这是我的代码:

 <div id="information" style="display:none">
 </div>

<?php $seat = mysql_query("SELECT * FROM people WHERE seat='C3-24'"); $row = mysql_fetch_array($seat); ?>

     <ul>
        <li> <?= $row['first_name']; ?></li>
        <li> <?= $row['last_name']?> </li>          
        <li> <?= $row['seat']?></li>            
     </ul>                   

 </div><!-- information -->

 <div id="c3-24" class="seat">
    <a class="trigger" onClick="document.getElementById('information').style.display='block';"></a></div>
</div>

基本上我想在选择 div id "c3-25" 时更新 li 列表。现在我知道 WHERE seat="C3-25" 只会输出数据库行，但我想在其他位置重用这个结构。从我读到的，这是不可能的。理想情况下，我想要一个 div 列表(c3-24 到 c3-50)，并在 li 字段中单击 anchor 标记时显示相应的信息。

我试过放置多个“信息”div，但这些信息最终只是堆叠在一起。

如有任何帮助，我们将不胜感激。

Answer 1

问题是时机。有两个非常独立的执行上下文值得考虑以理解您的问题:

1. 页面构建 (PHP) - 网络服务器创建 HTML 以发送到浏览器；
2. 用户交互 (JavaScript) - 用户的浏览器呈现页面并且用户正在与之交互。

由于页面构建时间发生在浏览器获取信息之前，因此它不可能执行用户决策(稍后发生)。

这种解决方案的典型解决方案是将应用程序分解为多个请求。作为最佳实践，最好将 JavaScript 拆分到一个单独的文件中，并使用一种称为委托(delegate)的技术来减少代码量。

这是我的做法。首先，发送页面结构(PHP/HTML):

<div id="information">
  <!-- leave empty -->
</div>
<div class="seats">
  <div class="seat">
    <a class="trigger">c3-24</a></div>
  </div>
  <div class="seat">
    <a class="trigger">c3-25</a></div>
  </div>
  ...
</div>

然后在单独的 JavaScript 文件中设置用户交互:

// setup a click handler on the parent 'seats' div
document.querySelector('.seats').addEventListener('click', function(e){
  // check if the target of the click was actually an anchor tag with class=target
  if (e.target.classList.contains('target')) {
    var
      // use the text of the anchor tag to get the seat
      seat = e.target.textContent,
      // create an XMLHttpRequest to asynchronously get the seat details
      req = new XMLHttpRequest();
    // handle server result by inserting details
    req.onreadystatechange = function() {
      if(req.readyState === 4){
        document.getElementById('information').innerHTML = req.responseText;
      }
    };
    req.open("GET", "seatdata.php?seat=" + encodeURIComponent(seat), true);
    req.send(null);
  }
});

最后，实现一个单独的 PHP 脚本来获取特定座位的数据(例如 seatdata.php)。您的脚本应该通过 $_GET['seat'] 获取 seat URL 参数并在您的查询中使用它。

根据 Madara 的评论，不要直接使用 mysql_query 函数，因为它已被弃用，请改用更好的东西。