2

我四处寻找，看看这是否可能，却空手而归。首先，这是我的代码：

 <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>

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

我尝试过放置多个“信息”div，但信息最终会堆叠在一起。

任何帮助，将不胜感激。

4

1 回答 1

1

问题在于时机。有两个非常独立的执行上下文值得考虑以了解您的问题：

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

由于页面构建时间发生在浏览器获取信息之前，它不可能实现用户决策（稍后发生）。

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

这就是我的做法。首先，下发页面结构（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）。您的脚本应该seat通过获取 URL 参数$_GET['seat']并在查询中使用它。

根据 Madara 的评论，不要mysql_query直接使用该功能，因为它已被弃用，而是使用更好的东西。

于 2012-09-17T19:29:25.393 回答