使用AJAX + JQuery通过PHP文件获取数据

Question

我正在画廊上，将鼠标悬停在缩略图上时会在工具提示中显示完整图像。 问题在于，这些完整图像通常位于取景器之外。 为了解决这个问题，如果图像超出窗口边界，我将移动工具提示，这需要立即知道图像尺寸（以避免工具提示跳来跳去）。 但是，图像需要一点加载（.gifs），所以我迫不及待要获取尺寸。 因此，我正在调用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

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

当您附加具有src prop的img时，将不再触发load事件。这就是问题所在。

Answer 2

你有没有尝试过..

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而不是.get）

您可以查看从getDimensions.php（在Firebug中）获得的信息吗？

Answer 3

我的猜测是，jQuery无法知道从getDimensions.php返回的数据是JSON（与普通的旧文本相反），并且它没有尝试解析它。

data的价值是什么（如果您将其打印到控制台）？

如果这是问题所在，您可以通过在echo之前将此行添加到PHP脚本中来解决：

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

Answer 4

试试$ .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吗？）。

更新

如yoda所述，您不需要解析php打印的对象，因为它是一个javascript对象。 尽管如此，要使javascript识别出它，您必须在php脚本的第一行放置以下命令：

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

否则，php输出将读取为字符串，并且您必须像我之前所述解析它。