drt12345678 2012-11-23 21:24
浏览 27
已采纳

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

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>
  • 写回答

2条回答 默认 最新

  • dsigg21445 2012-11-23 21:41
    关注

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

?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应
  • ¥15 matlab基于pde算法图像修复，为什么只能对示例图像有效
  • ¥100 连续两帧图像高速减法
  • ¥15 组策略中的计算机配置策略无法下发
  • ¥15 如何绘制动力学系统的相图
  • ¥15 对接wps接口实现获取元数据
  • ¥20 给自己本科IT专业毕业的妹m找个实习工作
  • ¥15 用友U8：向一个无法连接的网络尝试了一个套接字操作，如何解决？
  • ¥30 我的代码按理说完成了模型的搭建、训练、验证测试等工作(标签-网络|关键词-变化检测)