PHP数据库在具有不同锚标记的相同字段中显示 [英] PHP database display in same fields with different anchor tags

问题描述

我在上下搜索，看是否可行，然后空手而归。首先，这是我的代码：

 < div id = information style = display：none> 
< / div> 
 
<？php $ seat = mysql_query（ SELECT * FROM people where 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><！-信息-> 
 
< 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，但最终这些信息却彼此叠加。

任何帮助将不胜感激。

解决方案

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

1. 页面构造（PHP）-Web服务器创建HTML以发送给浏览器；


2. 用户交互（JavaScript）-用户的浏览器已呈现页面，并且用户正在与页面进行交互。

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

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

这就是我想要的做吧。首先，发送页面结构（PHP / HTML）：

 < div id = information> 
<！-留空-> 
< / 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文件中设置用户交互：

  //在父'seats'div上设置单击处理程序
 document.querySelector（'。seats'）。addEventListener（'click'，function（ e）{
 //检查点击的目标是否实际上是class = target 
的锚标记，如果（e.target.classList.contains（'target'））{
 var 
 //使用锚标签的文本获取席位
 seat = e.target.textContent，
 //创建XMLHttpRequest异步获取席位详细信息
 req = new XMLHttpRequest（）; 
 //通过插入详细信息来处理服务器结果
 req.onreadystatechange = function（）{
 if（req.readyState === 4）{
文档。 getElementById（'information'）。innerHTML = req.responseText; 
} 
}; 
 req.open（ GET， seatdata.php？seat = + encodeURIComponent（seat）， true）; 
 req.send（null）; 
} 
}）； 
  

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

根据Madara的评论，请勿使用 mysql_query 函数，因为它已被弃用，请改用更好的函数。

I've searched high and low to see if this is possible and came up empty handed. Firstly, here's my code:

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

Basically I want to update the li list when I select a div id "c3-25". Now I know that having the WHERE seat="C3-25" will only output the database row of with that but I want to reuse this structure with other locations. From what I read this isn't possible. Ideally I want to have a list of divs (c3-24 to c3-50) and display the corresponding information when the anchor tag is clicked in the li fields.

I've tried putting multiple "information" divs but the information just end up stacking on top of one another.

Any help would be appreciated.

解决方案

The problem is timing. There are two very separate execution contexts worth considering to understand your problem:

1. page construction (PHP) - the web server creates HTML to send to the browser;
2. user interaction (JavaScript) - the user's browser has rendered the page and the user is interacting with it.

Since page construction time happens way before the browser gets the information, it can't possibly implement user decisions (which happen later).

The typical solution to this kind of solution is to break up the application into multiple requests. As a best practice, it's also better to split out your JavaScript into a separate file and use a technique called delegation to reduce the amount of code.

Here's how I'd do it. First, send down the page structure (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>

Then set up the user interaction in a separate JavaScript file:

// 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);
  }
});

Finally, implement a separate PHP script which gets the data for a specific seat (e.g. seatdata.php). Your script should get the seat URL parameter via $_GET['seat'] and use that in your query.

Per Madara's comment, don't use the mysql_query function directly since it has been deprecated, use something better instead.

这篇关于PHP数据库在具有不同锚标记的相同字段中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！