В настоящее время я собираю страницу, на которой у меня есть список из 15 изображений персонала. Я пытаюсь настроить это так, чтобы, когда пользователь зависает над изображением, div в верхнем правом углу обновляет информацию, запрошенную из базы данных MySql. Например, пользователь сети наводил курсор мыши на изображение Персонала № 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> Вам понадобится структура вроде этого:
<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); ?>
Вот как поток вашего приложения будет работать с jQuery, PHP, MySQL:
Поэтому вам нужен PHP-скрипт и JavaScript.
Начните с PHP и попытайтесь получить что-то из db (посмотрите на PHP PDO)
Затем просмотрите jQuery.ajax ().
Удачи.