4,252 views
この記事は最終更新から 2304日 が経過しています。
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."); }); }); });