1

我目前正在整理一个页面，其中列出了 15 张员工图片。我正在尝试对此进行配置，以便当用户将鼠标悬停在图像上时，右上角的 div 会使用从 MySql DB 查询的信息进行更新。例如，Web 用户将鼠标悬停在 Staff #112 的图片上 -> 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>
4

2 回答 2

2

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

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

所以你需要 PHP 脚本和 JavaScript。

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

比查看 jQuery.ajax()。

祝你好运。

于 2012-11-23T21:32:30.373 回答
1

您将需要这样的结构：

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

?>
于 2012-11-23T21:41:30.873 回答