Question

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

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

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

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

当我在网络浏览器中访问网址（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脚本时，我遇到了错误。一旦我切换到使用相对路径，它工作正常。有什么想法吗？

Answer 1

也许尝试添加

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

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

Answer 2

我的问题有两部分解决方案。我认为根本原因是我的PHP脚本与我试图通过使用AJAX调用它的网站不同的域（ php脚本在我的网络服务器上，而我还在本地测试网站 ）。

我在本地使用运行服务器端的php脚本测试我的网站。正如@ArunKillu在他的评论中提到的，跨域请求导致我对php脚本的AJAX调用失败。一旦我将我的网站部署到与php脚本相同的域中，那就不再是问题了。
我不知道为什么，但只要我从我的AJAX调用中指定了php脚本的绝对路径，它就会失败。我认为这与确保请求来自同一域有关。一旦我切换到使用相对路径来调用php脚本，我没有任何问题。

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

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

2 个答案: