4,735 views
この記事は最終更新から 2648日 が経過しています。
1. やりたいこと
Ajaxとは Asynchronous Javascript + XML のこと。
詳しくは Wiki を参照のこと。
ここではボタン押下をトリガーに Ajaxで追加コンテンツをダウンロード＆表示してみる。
2. やってみる
(1) シンプル実装
script.js
ボタンが押されたら Ajaxで getimg.php を呼び出し、その応答結果を表示しているだけ。
$(function(){
$.ajaxSetup({
cache: false
});
$("button").click( function(){
$.ajax({
type: "get",
url: "./getimg.php",
async: true,
cache : false,
timeout: 10000
}).done(function(data) {
$(".contents").append('<img src="' + data + '">');
}).fail(function(){
window.alert("ERROR: Can't load data.");
});
});
});
getimg.php
起動したら imgディレクトリからランダムに一つを選択し、そのファイルパスを出力するだけ。
<?php
$resp = '';
$ary_file = glob("./img/*.gif");
if(count($ary_file) <= 0){
goto tagEND;
}
srand(time());
$i = rand(0, count($ary_file)-1);
$resp = $ary_file[$i];
tagEND:
echo $resp;
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="./script.js"></script> </head> <body> <button>Get Image</button> <div class="contents"></div> </body> </html>
実行サンプルはこちら。
https://www.dogrow.net/hp/sample/00055/
(2) 引数を渡したい場合
Ajaxに JSON形式でデータを入力するが、そのときに dataタグで引数を指定できる。
これが GET, POSTパラメーターとなってサーバー側に渡る。
$(function(){
$("button").click( function(){
$.ajax({
type: "get",
data: {color: "yellow", size: "big"},
url: "./getimg.php",
async: true,
cache : false,
timeout: 10000
}).done(function(data) {
$(".contents").append('<img src="' + data + '">');
}).fail(function(){
window.alert("ERROR: Can't load data.");
});
});
});
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-01-24: 0回 2026-01-23: 1回 2026-01-22: 3回 2026-01-21: 2回 2026-01-20: 0回 2026-01-19: 0回 2026-01-18: 0回