0

我正在尝试学习如何在网站上构建图片库。我正在使用.html / .css / .js文件创建页面。我在 Web 服务器上还有一个图像文件夹，其中包含任意数量的图像。我的目标是将包含该文件夹中每个图像 URL 的img标签注入到我的 html 中的照片 div中。

我编写了以下php 脚本，我在服务器上也有：

<?php
    $imagesDir = '../images/art/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    echo json_encode($images);
?>

我意识到我可以通过 php 脚本生成整个 html 并绕过 AJAX，但是我不想这样做，因为学习是我的主要目标，我想学习如何通过 AJAX 与 php 交互。

当我在 Web 浏览器中访问 URL ( http://www.fakedomain.com/php/images.php ) 时，php 脚本的输出格式如下：

[
    "../images/art/art01.jpg",
    "../images/art/art02.jpg",
    "../images/art/art03.jpg",
    "../images/art/art04.jpg"
]

然后我尝试在我的 javascript 中进行 AJAX 调用以从 php 文件中检索 JSON。

$.getJSON('http://www.fakedomain.com/php/images.php', function(images) {
            $.each(images, function(i, image) {
                $("#photos").append("<a class='fancybox' rel='group' src='" + image + "'/><img  src='" + image + "'/></a>");
            });
        });

尽管从我看过的其他帖子中这看起来应该非常简单，但我得到了错误，并且似乎没有代码在回调函数中执行。我什至刚刚尝试在页面上直接在 Chrome Javascript 控制台中调用下面的 javascript，但我得到了一个冗长的错误。

进入 Chrome Javascript 控制台：

$.getJSON('http://www.domain.com/php/images.php', function(images) { console.log("test") });

冗长的错误：

Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function (e){var t=e||T;return l&&l.abort(t),k(0,t),this}
always: function (){return i.done(arguments).fail(arguments),this}
complete: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
done: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
error: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
fail: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
getAllResponseHeaders: function (){return 2===x?a:null}
getResponseHeader: function (e){var t;if(2===x){if(!c){c={};while(t=Tn.exec(a))c[t[1].toLowerCase()]=t[2]}t=c[e.toLowerCase()]}return null==t?null:t}
overrideMimeType: function (e){return x||(p.mimeType=e),this}
pipe: function (){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()}
progress: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
promise: function (e){return null!=e?b.extend(e,r):r}
readyState: 0
responseText: ""
setRequestHeader: function (e,t){var n=e.toLowerCase();return x||(e=v[n]=v[n]||e,y[e]=t),this}
state: function (){return n}
status: 0
statusCode: function (e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else N.always(e[N.status]);return this}
statusText: "error"
success: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this}
then: function (){var e=arguments;return b.Deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()}
__proto__: Object

我将不胜感激任何帮助。我已经阅读了许多类似的 StackOverflow 帖子并尝试了他们的解决方案但没有成功。我觉得我必须在这里遗漏一些基本的东西。

非常感谢您抽出宝贵时间提供帮助。

编辑：

Arun 的评论让我知道我需要从同一个域调用 php 脚本，这是引导我通过将我的代码部署到 php 脚本所在的 Web 服务器来解决此问题的线索。即便如此，当我的 AJAX 使用绝对路径调用 php 脚本时，我还是遇到了错误。一旦我切换到使用相对路径，它就可以正常工作。任何想法为什么？

4

2 回答 2

0

也许尝试添加

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

echo在PHP 脚本中的语句之前。

于 2013-04-20T03:47:51.353 回答
0

我的问题有一个两部分的解决方案。我相信根本原因是我的 php 脚本位于与我尝试使用 AJAX 调用它的站点不同的域上（当我仍在本地测试站点时，php 脚本位于我的 Web 服务器上）。

  1. 我曾在服务器端运行我的 php 脚本在本地测试我的网站。正如@ArunKillu 在他的评论中提到的那样，跨域请求导致我对 php 脚本的 AJAX 调用失败。一旦我将我的站点部署到与 php 脚本相同的域上，这不再是问题。

  2. 我不知道为什么，但只要我从我的 AJAX 调用中指定了 php 脚本的绝对路径，它就会失败。我认为这与确保请求来自同一个域有关。一旦我切换到使用相对路径来调用 php 脚本，我就没有问题了。

感谢参与此讨论的每个人的帮助。

于 2013-04-21T07:45:03.723 回答