在图像悬停时查询MySql DB并更新页面而不刷新
我目前正在整理一个页面，其中列出了15张员工图像。我正在尝试配置它，以便当用户将鼠标悬停在图像上时，右上角的div将使用从MySql
DB查询的信息进行更新。例如，Web用户将鼠标悬停在Staff＃112的图片上->
Div更新，以包含来自mysql的高度，重量，位置和位置，而无需刷新。我研究了一段时间，但只能找到如何使用Ajax，Php，Jquery和一个form元素来完成此工作。任何帮助，教程或信息将不胜感激。谢谢！
更新
我最终更改了所提供的一些代码，最终版本为：
<script type="text/javascript">
$('.staff_hover').on('click', function(){
id = $(this).attr('id');
$.post('staff_php.php',{id: id}, function(data) { var obj = jQuery.parseJSON(data);
var staffnum = obj.staffnum;
var height = obj.height;
var eye = obj.eye;
var hair = obj.hair;
var abt1 = obj.abt1;
var abt2 = obj.abt2; alert(obj.height);
$('#staff_info').html('<b>STAFF #</b>: ' + staffnum + ' <br /><b>HEIGHT</b>: ' + height + ' <br /><b>EYE COLOR</b>: ' + eye + '<br /> <b>HAIR COLOR</b>: ' + hair + '<br /><b>ABOUT</b>:<br /> <b>-</b> ' + abt1 + '<br/><b>-</b> ' + abt2);
});
}); </script>
问题答案：
您将需要这样的结构：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('img').hover(function() {
id = $(this).attr('id');
$.ajax({
type: "POST",
url: "ax_get_staff.php",
data: 'hovered_id='+id,
success:function(data){
alert(data);
var obj = jQuery.parseJSON(data);
var height = obj.height;
var weight = obj.weight;
alert(obj.height);
$('#upper_right_div').html('Height is: ' + height + ' and weight is: ' + weight);
}
});
},function(){
//Hover-out function
//Clear your div, or some such
$('#upper_right_div').html('');
});
});
</script>
</head>
<body>
<div id="myDiv">
Hover over picture below to GO:<br />
<img id="6" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>
<div id="upper_right_div"><div>
</body>
</html>
您的AJAX（ax_get_staff.php）文件将如下所示：
<?php
include 'login_to_database.php';
$id = $_POST['hovered_id'];
$result = mysql_query("SELECT `height`, `weight`, `location` FROM `staff` WHERE `user_id` = '$id'") or die(mysql_error());
$staff = mysql_fetch_assoc($result);
//print_r($staff);
echo json_encode($staff);
?>
-
这个问题很基本，但是我想确定没有比我现在做的更好的方法了。假设我有一个脸书图标。到目前为止，当用户悬停在该图像上时，我会显示不同的图像以更改颜色。有没有一种替代的CSS方法来做到这一点，所以我不使用多个图像？ 在下面的小提琴中，我试图改变背景，但这只覆盖了整个图像。 JSFIDLE
-
问题内容： 我需要一个包含图像的菜单，当有人将鼠标悬停在菜单上时，图像应该会更改。 HTML CSS 我面临的问题是，当我将 鼠标悬停 在菜单项周围时，要显示在悬停上的图像显示 在 旧图像 的背面 。此外，显示的悬停背景图像的宽度和高度 很小 。请帮忙。谢谢！[在此处输入图片描述] [1] 问题答案： 将此代码放在结束body标签之前， 将课程首页放置在标签中。做完了 完美运作。
-
问题内容： 我有一个文件，其中我在页面顶部显示外部页面（使用iframe），其他部分是写在文件中的html代码的输出。 HTML代码如下所示： 现在，我想以编程方式刷新页面而不刷新。 我的问题是我可以不刷新页面就刷新页面吗？ 答案/提示将不胜感激。 问题答案： 该嵌在主HMTL页面（或在JSP）。因此，如果刷新页面，则肯定会再次加载iframe。 为了避免这种情况，我可以考虑以下两种选择： 使用A
-
问题内容： 这有可能吗？ 这是问题所在： 我有一个使用此URL的关键字搜索（搜索后）：http：// localhost / thi / search？keyword = key 然后我有一个使用AjaxForm插件（jquery）的滑块搜索… 当我执行滑块搜索时，显然我仍然会在关键字搜索URL中（因为请求是通过ajax发送的） 有没有办法将当前网址更改为类似http：// localhost /
-
问题内容： 如何更改此确切代码以对鼠标悬停产生悬停效果？ 我尝试遵循其他一些问题和答案，但我无法真正遵循它们。 因此，HTML是： 现在，我要做的是当鼠标悬停在小图像上时更改大尺寸图像。 问题答案： 请尝试以下代码。工作正常 我修改了代码，希望它能稍作延迟。.但是，它不是动画。
-
问题内容： 好的。我在这里建立了一个mysql查询浏览器，例如navicat。使用MySQLdb执行查询。 这是奇怪的部分。当我通过程序运行查询（使用MySQLdb）时，它给我成功，受影响的行= 1，但是当我在phpmyadmin中查看该查询时，该值没有改变。 因此，在执行查询之前，我先将其打印出来，然后将其复制并粘贴到phpmyadmin的查询窗口中，然后单击go即可运行。长话短说，更新查询不起