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

I am trying to learn how to build an image gallery on a website. I am creating the page using .html / .css / .js files. I also have an image folder on the web server that has an arbitrary number of images in it. My goal is to inject img tags containing each of those images URL's from that folder into the photos div in my html.

我正在学习如何在网站上建立一个图片库。我正在使用.html / .css / .js文件创建页面。我还在web服务器上有一个图像文件夹，其中包含任意数量的图像。我的目标是将img标签从文件夹中包含这些图片的URL插入到html中的photos div中。

I wrote the following php script which I also have on the server:

我写了下面的php脚本，服务器上也有:

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

I realize I could generate the entire html through a php script and bypass the AJAX, however I don't want to do that as learning is my primary objective here and I want to learn how to interact with php through AJAX.

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

The output of the php script when I visit the URL (http://www.fakedomain.com/php/images.php) in the web browser is of the following form:

在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"
]

I am then trying to make an AJAX call in my javascript to retrieve the JSON from the php file.

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

Although this seems like it should be very straightforward from other posts I've seen, I get errors and it appears that no code executes within the callback function. I've even just tried calling the javascript below directly in the Chrome Javascript console while on the page and I get a longwinded error.

虽然从我所见过的其他文章来看，这似乎非常简单，但是我得到了错误，并且在回调函数中似乎没有执行任何代码。我甚至在页面上直接在Chrome javascript控制台中尝试调用下面的javascript，我得到了一个冗长的错误。

Entered into Chrome Javascript console:

进入Chrome Javascript控制台:

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

Longwinded error:

唠叨的错误:

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

I would greatly appreciate any help. I've read through many similar * posts and tried their solutions with no success. I feel like I must be missing something basic here.

我非常感谢任何帮助。我读过许多类似的*帖子，尝试过他们的解决方案，但没有成功。我觉得我一定错过了一些基本的东西。

Thank you very much for taking the time to assist.

非常感谢您抽出时间来帮助我。

EDIT:

编辑:

Arun's comment letting me know that I needed to be calling the php script from the same domain was the clue that led me towards fixing this issue by deploying my code to the web server where the php script already was. Even then I had an error when my AJAX called the php script using an absolute path. Once I switched to using a relative path, it worked fine. Any ideas why?

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

2 个解决方案

#1

Maybe try adding

也许尝试添加

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

before the echo statement in the PHP script.

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

#2

There was a 2 part solution to my problem. I believe the root cause was that my php script was on a different domain than the site I was trying to call it from using AJAX (php script was on my web server while I was still testing the site locally).

我的问题有两部分解决方案。我认为根本的原因是，我的php脚本与我试图使用AJAX调用的站点处于不同的领域(php脚本在我的web服务器上，而我仍在本地测试站点)。

I had was testing my site locally with my php script running serverside. As @ArunKillu mentioned in his comment, the cross domain request was causing my AJAX call to the php script to fail. Once I had deployed my site onto the same domain as the php script, that was no longer a problem.

我使用运行服务器端的php脚本在本地测试我的站点。正如@ArunKillu在评论中提到的，跨域请求导致了我对php脚本的AJAX调用失败。一旦我将我的站点部署到与php脚本相同的域中，这就不再是个问题了。
I don't know why, but as long as I specified an absolute path to the php script from my AJAX call, it would fail. I assume this relates to ensuring the request is from the same domain. Once I switched to using a relative path to call the php script, I had no issues.

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

Thanks for the help everyone who participated in this discussion.

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

#1