(55) Ajaxで動的にコンテンツを追加表示

投稿者: | 2018年8月31日

この記事は最終更新から 1096日 が経過しています。

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.");
    });
  });
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)