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

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

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

当你添加具有 src 属性的 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 的值是多少（如果将其打印到控制台）？

如果是这个问题，你可以通过在PHP脚本中添加这一行来解决它，在echo之前：

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 输出被读取为字符串，你必须像我之前所说的那样解析它。