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

我正在制作一个图库，当鼠标悬停在缩略图上时，它会在工具提示中显示完整的图像。问题是，这些完整的图像通常不在取景器内。为了解决这个问题，如果图像将超出窗口边界，我将移动工具提示，这需要立即知道图像的尺寸（以避免工具提示跳转）。 但是，图像加载（.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();
});

this.imagePreview=函数（）{
$（“a.preview”）.hover（函数（e）{
var viewHeight=$（窗口）.height（）+$（窗口）.scrollTop（）；
var viewWidth=$（window.width（）；
var xOffset=e.pageX+40；
var yOffset=e.pageY+40；
var url='1〕http://mysite.com/i/'+this.href.slice（20）；
var w=0；
var h=0；
$（“正文”）。追加（“”）；
$.get（“getDimensions.php/？img=“+url，函数（数据））{
w=数据。w；
h=数据。h；
$（“body”）.append（“触发的图像尺寸信息：”+w+h）；
});
$（“预览”）
.css（“顶部”，yOffset+“px”）
.css（“左”，xOffset+“px”）
.fadeIn（“快速”）；
$（'#img'）.load（函数（）{
如果（（e.pageX+img.width）>viewWidth）{xOffset=e.pageX-img.width-70；}
如果（（e.pageY+img.height）>viewHeight）{yOffset=e.pageY-img.height-70；}
$（“预览”）
.css（“顶部”，yOffset+“px”）
.css（“左”，xOffset+“px”）
.fadeIn（“快速”）；
});
},
函数（）{
$（“#预览”）.remove（）；
});
};
//在页面加载时启动脚本
$（文档）.ready（函数（）{
图像预览（）；
});

getDimensions.php：

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

$（“正文”）。附加（“”）；

---

当你附加带有src-prop的img时，它将不再触发加载事件。问题是。

我猜jQuery无法知道从

getDimensions.php

返回的数据是JSON（与纯旧文本相反），并且它不会试图解析它

数据的值是多少（如果您将其打印到控制台）

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

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

请尝试$.parseJSON（）：

并确保您的php工作正常（它不应该是$_GET['img']而不是$img？）

更新

正如yoda所说，您不需要解析php打印的对象，因为它是一个javascript对象。尽管如此，要让javascript认识到这一点，您必须在php脚本的第一行输入以下命令：

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

否则，php输出将被读取为字符串，您必须像我前面所说的那样对其进行解析。
您是否尝试过

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（firebug中）得到的信息吗？
尝试过，但似乎仍然不起作用。谢谢你抽出时间来帮助我！{“w”：548，“h”：150}是它为一个图像输出的内容。这是不必要的，javascript可以将纯文本理解为json字符串。@Yoda实际上jQuery不应该尝试将其解析为json，除非指定了
数据类型
，或者服务器在
内容类型
头中发送MIME类型：“…如果未指定，jQuery将尝试根据响应的MIME类型推断它”@yoda这不正确，或者我遗漏了什么。谢谢你的回复。尝试使用$.parseJSON（）：但它似乎也没有响应。我尝试独立测试php文件，效果很好，将$img与$_GET['img']交换似乎没有什么不同。不需要解析json，它会在响应中自动解析。是的，这似乎也不起作用。也许你的问题是getDimensions.php**/**？img。
header('Content-type: application/json');

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");