Пожалуйста, смотрите комментарии о том, что не делает выборку с каждым движением мыши.Плохо, плохо, плохо.Используйте некоторое регулирование.
Тем не менее, проблема в том, что вы никоим образом не используете результат в функции успеха.
Ваша функция PHP ничего не возвращает браузеру.Переменные PHP волшебным образом не становятся доступными для вашего клиентского JavaScript.PHP просто запускается, создает HTML-страницу в качестве вывода и отправляет ее в браузер.Затем браузер анализирует информацию, которая была ему отправлена, в зависимости от ситуации.
Вам нужно изменить ваш fetch.php, чтобы получить некоторую правильно отформатированную строку JSON с нужными вам данными.Это выглядело бы как { userid: 2837 }.Например, попробуйте:
echo "{ userid: $user_id, username: $user_name }";
В вашем обратном вызове успеха первый аргумент, который jQuery передаст этой функции, будет результатом анализа (надеюсь, правильно отформатированного) результата JSON, чтобы он стал правильным объектом JavaScript,Затем в обратном вызове успеха вы можете использовать результат следующим образом:
//data will contain a JavaScript object that was generate from the JSON
//string the fetch.php produce, *iff* it generated a properly formatted
//JSON string.
function(data) {
$("#user_id_area").html(data.user_id);
}
Измените ваш пример HTML следующим образом:
User ID: <span id="user_id_area"> </span>
Где showHover - вспомогательная функцияэто на самом деле показывает парение.
Вот схема для регулировки функции перемещения мыши:
jQuery.fn.elementlocation = function() {
var curleft = 0;
var curtop = 0;
var obj = this;
do {
curleft += obj.attr('offsetLeft');
curtop += obj.attr('offsetTop');
obj = obj.offsetParent();
} while ( obj.attr('tagName') != 'BODY' );
return ( {x:curleft, y:curtop} );
};
$(document).ready( function() {
var updatetimer = null;
$("#gdimage").mousemove( function( eventObj ) {
clearTimer(updatetimer);
setTimeout(function() { update_hover(eventObj.pageX, eventObj.pageY); }, 500);
}
var update_hover = function(pageX, pageY) {
var location = $("#gdimage").elementlocation();
var x = pageX - location.x;
var y = pageY - location.y;
x = x / 5;
y = y / 5;
x = (Math.floor( x ) + 1);
y = (Math.floor( y ) + 1);
if (y > 1) {
block = (y * 200) - 200;
block = block + x;
} else {
block = x;
}
$("#block").text( block );
$("#x_coords").text( x );
$("#y_coords").text( y );
$.ajax({
type: "GET",
url: "fetch.php",
data: "x=" + x + "&y=" + y + "",
dataType: "json",
async: false,
success: function(data) {
//If you're using Chrome or Firefox+Firebug
//Uncomment the following line to get debugging info
//console.log("Name: "+data.username);
$("#user_name_area").html(data.username);
}
});
});
});