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 投稿を読み、それらのソリューションを試してみましたが成功しませんでした。ここで基本的な何かが欠けているに違いないと感じています。

お時間を割いてご協力いただき、誠にありがとうございました。

編集：

同じドメインから php スクリプトを呼び出す必要があることを知らせてくれた Arun のコメントは、php スクリプトが既に存在する Web サーバーにコードをデプロイすることで、この問題を解決する手がかりとなりました。それでも、AJAX が絶対パスを使用して php スクリプトを呼び出したときにエラーが発生しました。相対パスの使用に切り替えると、正常に機能しました。理由はありますか？

4

2 に答える 2

0

私の問題には2つの部分の解決策がありました。根本的な原因は、私の php スクリプトが、AJAX を使用して呼び出しようとしていたサイトとは別のドメインにあったことだと思います (サイトをローカルでテストしている間、php スクリプトは Web サーバー上にありました)。

  1. サーバーサイドで実行されているphpスクリプトを使用して、ローカルでサイトをテストしていました。@ArunKillu がコメントで述べたように、クロス ドメイン リクエストが原因で、php スクリプトへの AJAX 呼び出しが失敗していました。自分のサイトを php スクリプトと同じドメインにデプロイすると、それはもはや問題ではありませんでした。

  2. 理由はわかりませんが、AJAX 呼び出しから php スクリプトへの絶対パスを指定している限り、失敗します。これは、リクエストが同じドメインからのものであることを確認することに関連していると思います。相対パスを使用して php スクリプトを呼び出すように切り替えた後は、問題はありませんでした。

このディスカッションに参加してくれたすべての人に感謝します。

于 2013-04-21T07:45:03.723 に答える