Получение данных через файл PHP с использованием AJAX + JQuery

Question

Я работаю над галереей, которая отображает полное изображение внутри всплывающей подсказки при наведении на миниатюры. Проблема в том, что эти полные изображения обычно выходят за пределы видоискателя. Чтобы исправить это, я перемещаю всплывающую подсказку, если изображение выходит за границы окна, что требует немедленного знания размеров изображения (чтобы избежать всплывающей подсказки). Однако загрузка изображений занимает немного времени (.gifs), поэтому я не могу ждать в DOM, чтобы получить размеры. Итак, я вызываю PHP-скрипт для возврата размеров изображения перед их загрузкой.

Проблема в том, что мой вызов $ .get не отвечает. Я знаю, что скрипт PHP работает нормально, но я не получаю никаких данных от него через jquery. Любая помощь будет принята с благодарностью. Спасибо !!

hover.js:

this.imagePreview = function(){

    $("a.preview").hover(function(e){
            var viewHeight = $(window).height() + $(window).scrollTop();
            var viewWidth = $(window).width();
            var xOffset=e.pageX+40;
            var yOffset=e.pageY+40;
            var url = 'http://mysite.com/i/' + this.href.slice(20);
            var w = 0;
            var h = 0;

            $("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");

            $.get("getDimensions.php/?img=" + url, function(data){
                w = data.w;
                h = data.h;
                $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
            });

            $("#preview")
                .css("top",yOffset + "px")
                .css("left",xOffset + "px")
                .fadeIn("fast");

            $('#img').load(function() {
                if((e.pageX+img.width)>viewWidth) {  xOffset=e.pageX-img.width-70; }
                if((e.pageY+img.height)>viewHeight) { yOffset=e.pageY-img.height-70; }
                $("#preview")
                    .css("top",yOffset + "px")
                    .css("left",xOffset + "px")
                    .fadeIn("fast");
            });

        },
        function(){
            $("#preview").remove();
        });

};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

getDimensions.php:

<?php
list($width, $height, $type, $attr) = getimagesize($img);
echo json_encode(array("w"=>$width,"h"=>$height));
?> 

Answer 1

Вы пробовали ..

var rand = Math.floor(Math.random()*11);

$.get("getDimensions.php/?img=" + url + "&r=" + rand, function(data){
            w = data.w;
            h = data.h;
            $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
        },"json");

(Кроме того, я настоятельно рекомендую .ajax over .get)

Можете ли вы посмотреть, что вы получаете от getDimensions.php (вподжигатель)

Answer 2

Я предполагаю, что jQuery не может знать, что данные, возвращаемые из getDimensions.php, являются JSON (в отличие от простого старого текста), и он не пытается их проанализировать.

значение data (если вы распечатываете его на консоль)?

Если это проблема, вы можете решить ее, добавив эту строку в скрипт PHP перед echo:

header('Content-Type: application/json');

Answer 3

Попробуйте $ .parseJSON ():

        $.get("getDimensions.php/?img=" + url, function(data){
            var jdata = $.parseJSON(data);
            w = jdata.w;
            h = jdata.h;
            $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
        });

и убедитесь, что ваш php работает (не должно ли это быть $ _GET ['img'] вместо $ img?).

UPDATE

Как заявляет yoda, вам не нужно анализировать объект, напечатанный php, так как это объект javascript. Тем не менее, чтобы javascript распознал его так, вы должны поместить в самую первую строку вашего php-скрипта команду:

header('Content-type: application/json');

В противном случае вывод php читается как строка, и вы должны проанализировать его, как я уже говорил ранее.

Answer 4

$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");

когда вы добавляете img, у которого есть src prop, это больше не будет запускать событие load. Вот в чем проблема.