Question

我目前正在整理一个页面，其中列出了15个员工图片。我正在尝试对此进行配置，以便当用户将鼠标悬停在图像上时，右上角的div会更新从MySql DB查询的信息。例如，网络用户将鼠标悬停在工作人员＃112的图片上 - ＆gt; Div更新包括mysql的高度，重量，位置和位置，无需刷新。我研究了一段时间，但只能找到如何使用Ajax，Php，Jquery和表单元素完成。任何帮助，教程或信息将不胜感激。谢谢！

更新

我最终更改了提供的一些代码，最终版本为：

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

Answer 1

以下是应用程序的流程如何与jQuery，PHP，MySQL一起使用：

浏览器通过jQuery将请求发送到服务器。
PHP会收到请求对MySQL进行查询。并返回结果。
jQuery会得到响应并填充div。

所以你需要PHP脚本和JavaScript。

从PHP开始，尝试从db获取内容（查看PHP PDO）

比调查jQuery.ajax（）。

Answer 2

你需要一个像这样的结构：

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

?>

在图像悬停和更新页面上查询MySql DB而不刷新

2 个答案: