查询MySQL数据库的图像悬停和更新页面无刷新图像、页面、数据库、MySQL
我目前组建了一个网页，我有15名工作人员的图像列表。我想这个配置，这样，当用户将鼠标悬停在图片，在右上角更新的信息从一个MySQL数据库查询一个div。例如，Web用户悬停鼠标的工作人员＃112图片 - >股利更新，包括身高，体重，位置，位置从MySQL不清爽。我已经研究了一段时间，但只能找到这如何使用Ajax，PHP，jQuery和表单元素进行。任何帮助，辅导，或信息将大大AP preciated。谢谢！
更新
我最终改变了一些中提供的最终版本是code：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（'。staff_hover'）。在（'点击'，函数（）{
ID = $（本）.attr（'身份证'）;
.post的$（'staff_php.php'，{ID：ID}，功能（数据）{VAR OBJ = jQuery.parseJSON（数据）;
VAR staffnum = obj.staffnum;
VAR HEIGHT = obj.height;
VAR眼= obj.eye;
VAR的头发= obj.hair;
VAR ABT1 = obj.abt1;
VAR abt2 = obj.abt2;警报（obj.height）;
$（'＃staff_info）HTML（'＆LT; B＆GT;工作人员＃＆LT; / B＆GT ;:'+ staffnum +'＆LT; BR /＆GT;＆LT; B＆GT; HEIGHT：LT; / B＆GT ;:'+高度+'＆LT ; BR /＆GT;＆LT; B＆GT;眼影＆LT; / B＆GT ;:'+眼+'＆LT; BR /＆GT;＆LT; B＆GT;发色＆LT; / B＆GT ;:'+吹风+'＆LT; BR /＆GT;＆LT ; B＆gt;关于＆LT; / B＆GT;：＆LT; BR /＆GT;＆LT; B＆GT; - ＆LT; / B＆GT;+ ABT1 +'＆LT; BR /＆GT;＆LT; B＆GT; - ＆LT; / B＆GT;'+ abt2） ;
}）;
}）; ＆LT; / SCRIPT＆GT;
解决方案
您会希望有一个结构是这样的：
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（'IMG'）。悬停（函数（）{
ID = $（本）.attr（'身份证'）;
$阿贾克斯（{
键入：POST，
网址：ax_get_staff.php
数据：'hovered_id ='+ ID，
成功：功能（数据）{
警报（数据）;
变种物镜= jQuery.parseJSON（数据）;
VAR HEIGHT = obj.height;
VAR重量= obj.weight;
警报（obj.height）;
$（'＃upper_right_div）HTML（的身高是：'+高度+，重量：'+重）;
}
}）;
}，功能（）{
//悬停输出功能
//清除您的股利，或一些这样的
$（'＃upper_right_div）HTML（''）。
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =myDiv＆GT;
将鼠标悬停在图片下面去：＆LT; BR /＆GT;
＆LT; IMG ID =6 src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
＆LT; / DIV＆GT;
＆LT; DIV ID =upper_right_div＆GT;＆LT; DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
和你的AJAX（ax_get_staff.php）文件将是这样的：
＆LT; PHP
包括login_to_database.php;
的$ id = $ _ POST ['hovered_id'];
$结果= mysql_query（选择`height`，`weight`，`location`从`staff` WHERE`user_id` ='的$ id'）或死亡（mysql_error（））;
$员工= mysql_fetch_assoc（$结果）;
//的print_r（$人员）;
回声json_en code（$人员）;
？＆GT;
I am currently putting together a page where I have a list of 15 staff images. I'm trying to configure this so that when a user hovers over the image, a div in the upper-right corner updates with information queried from a MySql DB. For instance, web user hovers mouse over picture of Staff #112 -> Div updates to include height, weight, location, and position from mysql without refreshing. I have researched for a while but can only find how this is done using Ajax, Php, Jquery, and a form element. Any help, tutorials, or information would be greatly appreciated. Thanks!
UPDATE
I ended up changing some of the code that was provided and the final version was:
<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>
解决方案
You will want a structure something like this:
<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>
And your AJAX (ax_get_staff.php) file will look like this:
<?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);
?>
