Question

我正在构建一个日历，其中包含存储在mysql中的特定日期的事件。

我要做的是，当用户在日历上的特定日期悬停时，它将查询mysql并在日历下方的div中检索并显示当天的那些事件。有什么想法吗？

这是粗略的东西::

<div class='calendar'>
 ..
 ..
 <div class='cal-day'>
  this is div that I want to initiate the hover 
  so when a user hovers over this div,mysql gets 
  queried and sends the results to the results div
 </div>
</div>

<div id='results>
 show results here
</div>

Answer 1

你需要在div中再增加一个属性来保存日期。

一旦有人将鼠标移到div ajax上就会产生结果。

Div应该是

<div class='cal-day' rel="2011-10-10">
  this is div that I want to initiate the hover 
  so when a user hovers over this div,mysql gets 
  queried and sends the results to the results div
 </div>

JQuery的

$('.cal-day').mouseover(function() {
  $('#result').load('ajax/result.php?date='+$(this).attr('rel');
});

Answer 2

创建一个将日期作为GET参数的PHP页面，然后根据给定的日期生成应在输出中显示的HTML输出。这可以使用$.load函数使用jQuery轻松完成：

$('#cal-day-id').load(
    // the url of the AJAX request that will retrieve data
    'calinfo.php',

    // this would be dynamically calcaluated based
    // on which day they are hovering over
    { date: '2011-10-06' }
);

calinfo.php可能看起来像这样：

$thedate = $_GET['date'];
// connect to db
$result = mysql_query('select * from events where date = ?');
// get results and display in HTML format for embedding on page
while ($row = mysql_fetch_assoc($result)) {
    echo '<p>Event: '. $row['name']. '</p>';
    echo '<p>Description: '. $row['description']. '</p>';
}

Answer 3

只需向php脚本发出ajax请求，即获取mysql的结果并将其发送到浏览器。你可以使用jQuery $.ajax()函数。谷歌吧:)）

Answer 4

你必须做一些AJAX才能做到这一点。设置一个“onmouseover”属性，指向一些Javascript，它发出HTTP请求以获取数据，然后使用回调函数更新结果div。

Answer 5

你无法从前端HTML直接与MySQL交谈，所以你需要一个层（服务器端技术，如Java / PHP / RoR，以及具有MySQL驱动程序）。

一旦你有了服务器端控制器，你就可以设置div的mousein和mouseout事件（或jQuery悬停）来对服务器进行AJAX调用并检索日期列表。

将鼠标悬停在Div上时查询MySql

5 个答案: