質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SQL Server

SQL Serverはマイクロソフトのリレーショナルデータベース管理システムです。データマイニングや多次元解析など、ビジネスインテリジェンスのための機能が備わっています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1176閲覧

AJAX HTML

skyblue

総合スコア22

SQL Server

SQL Serverはマイクロソフトのリレーショナルデータベース管理システムです。データマイニングや多次元解析など、ビジネスインテリジェンスのための機能が備わっています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/18 11:48

お尋ね「します。下記はAJAXのHTMLです。画像のフォルダがあり、違う画像をいれても、WEB上でAPI上の画像がそのまも反映されますが、自分の画像が出力できるようにできないでしょうか?
(Webserver上には写真はUPしています)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax_v1.html</title> <style> section{padding:10px;width:840px;background-color:rgba(0,0,0,0.5);} #thumbs { height: 70px; overflow: hidden;} #thumbs img {width: 100px;height: 54px;margin: 20px 7px 0 7px; cursor: pointer;} #thumbs img.selected { opacity: 0.8;alpha(opacity=80);} </style> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(document).ready(function(){ ////この中に処理を記述 開始

//****************************************************************
//A.Ajax通信 開始(ver1.8...)
//****************************************************************
var request = $.ajax({
type: 'GET', //GET、POST
url: "ajax_data.json",
cache:false, //初期値はtrueでキャッシュする状態
dataType: 'jsonp', //text, html, xml, json, jsonp, script
jsonpCallback: 'jsonp_data',
timeout: 3000
});

//****************************************************************
//B.Ajax成功後処理
//****************************************************************
request.done(function(data) {
console.log("----done.通信処理OK----");
//パース処理
var len = data.length; //データの個数を取得
for(var i=0; i<len; i++){ //データの個数分、繰り返し処理
$("#thumbs").append('<img src="img/'+data[i].src+'" alt="'+data[i].alt+'">'); //個数分IMGタグをHTML内に追加
}
});

//****************************************************************
//C.Ajaxエラー処理
//****************************************************************
request.fail(function() {
console.log("----fail.通信処理NG----");
});

//****************************************************************
//D.Ajax通信完了後処理
//****************************************************************
request.always(function() {
console.log("----always.通信処理完了----");
//最初の1回だけ動作するクリックイベント
$("#thumbs img").one("click",function(){
$("#links").show(1000);
});
//サムネイルクリック:画像切り替え処理
$("#thumbs img").on("click",function(){
var img_src = $(this).attr("src");
var img_alt = $(this).attr("alt");
$("#lage_img").attr("src",img_src).attr("alt",img_alt);
$("#select_img").html(img_src + img_alt);
});
});

//この中に処理を記述 終了
});
</script>

</head> <body> <header>ImageSelector</header> <main> <section> <!-- 選択した画像を表示 --> <div><img id="lage_img" src="" alt=""></div> <!--/ 選択した画像を表示 -->
<!-- IMGが挿入される場所 --> <div id="thumbs"></div> <!--/ IMGが挿入される場所 -->
</section> </main> <footer>フッター[現在選択している画像は:<span id="select_img"></span>]</footer> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/03/18 11:58

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「自分の画像」とはなんでしょうか。
guest

回答1

0

ベストアンサー

まず、ajax で何が返ってきて、それを JavaScript がどうやって画面に反映しているか、理解しましょう。

このコードは、結局、ajax が画像ファイルのファイル名と題名(代替文字列)を配列の形で返してくるので、それを入れておいて、適宜差し替えて表示しています。
つまり「どんな画像を表示させるか」を決定しているのは、このコードではなくて ajax で呼び出した先(ajax_data.json)です。

投稿2018/03/18 12:04

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

skyblue

2018/03/18 12:47

ありがとうございます。JSONP_DATAもWEB ServerにUPしiimgフォルダの中身を違うものにしました。ファイル名は元と同じものにしています。 がその画像が反映しないです。 sonp_data([ { "src":"l1.png", "alt":"l1です。" }, { "src":"l2.png", "alt":"l2です。" }, { "src":"l3.png", "alt":"l3です。" }, { "src":"l4.png", "alt":"l4です。" }, { "src":"l5.png", "alt":"l5です。" }, { "src":"l6.png", "alt":"l6です。" }, { "src":"l7.png", "alt":"l7です。" } ] );
tacsheaven

2018/03/18 13:00 編集

このコードだと画像ファイルは、この HTML(仮に index.html としましょうか) が置かれているサーバー上で、 {どこかのフォルダ} + index.html + img ※ディレクトリ  + l1.png  + l2.png …… という形で置かれている必要がありますが、そうなっていますか?
skyblue

2018/03/21 04:34

ajax_v1.htmlの中身が一番上に記述 とajax_data.jsonその次に記述とimgフォルダにl1.pngが6枚の写真があります。この6枚の画像を差し替えました。 差し替えた画像が出ず、もとの画像が出力します。自分が使用しているレンタルserver上に画像がないです。何かAPIを通じて画像をとってきているんでしょうか?差し替えた画像を表示させるためには、何か変更しないと駄目ですか?宜しくお願い致します。
skyblue

2018/03/26 13:03

ありがとうございました。きっちり画像が出るようになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問