使用JQuery/AJAX从PHP检索JSON时出错

我正在努力学习如何在网站上建立一个图像库。我正在使用.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);
?>

然后，我尝试在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>");
            });
        });

冗长的错误：

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脚本时，我也出现了一个错误。一旦我切换到使用相对路径，它工作得很好。你知道为什么吗

也许可以尝试添加

标题（'Content-Type:application/json'）；

---

在PHP脚本中的

echo

语句之前。

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

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

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

---

感谢参与本次讨论的所有人的帮助

我尝试添加它，但我得到了相同的错误。谢谢你的帮助！你能进入Chrome开发者工具，查看网络请求列表并查看响应吗？有什么看起来可疑的吗？我认为跨域请求是问题所在。页面上的其他内容都可以加载，但这个请求看起来确实可疑。我看到Name:images.php，Method:GET，Status:（canceled），Type:Pending，Initiator:jquery latest.min.js:5脚本，大小：13B 0B，时间：2.29s-Arun，我认为这很有意义。我目前正在Dreamweaver中使用该网站，并在我的计算机上本地预览它，而php脚本实际上已部署到web服务器上。我想我需要在我的计算机上使用php脚本进行预览？编辑：正如我所说，我对php是新手。我是否能够在本地运行脚本…？调试代码应该更像：$.getJSON（“”，函数（图像）{console.log（图像）}）；这样，它将输出PHP输出的任何内容，包括启用时的错误。

$.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