1

私は現在、15人のスタッフの画像のリストがあるページをまとめています。ユーザーが画像にカーソルを合わせると、右上隅のdivがMySqlDBから照会された情報で更新されるようにこれを構成しようとしています。たとえば、Webユーザーはスタッフ＃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 に答える