2024年9月18日

Ajaxの基本文例

Ajaxの基本文例。
備忘録、、、というか、コピペして編集する用。

使用環境

・jQuery　Version 3.7.1（GoogleのCDNから取得）

基本サンプル

まず先に、API側を準備。
現在日時をJSON形式で返すのみの簡単なもの。

<?php

// 時間をJSON形式で返却
header( 'Content-Type: application/json' );
echo json_encode( [ 'now' => date( 'Y/m/d H:i:s' ) ] );

sample.php

本記事の本題であるAjax側はこちら。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<button>What time is it now.</button>

<script>
  $(function(){

    // ボタンクリック時
    $('button').on( 'click', function() {

      // Ajax通信
      $.ajax({
        url: '/sample.php', // APIのエンドポイント
        method: 'GET',      // HTTPメソッド　GET、POST、PUT
        dataType: 'json',   // レスポンスの期待型
        async: true,        // 非同期かどうか　※未指定時はtrue（非同期）
        timeout: 5000,      // タイムアウト時間（ミリ秒）　※0はタイムアウトなし
        data:{              // 送信するパラメータ
          param1: 1,
          param2: 2,
        }
      })
      // 通信成功時
      .done( function( data ) {
        console.log( data.now );
        alert( data.now );
      })
      // 通信失敗時
      .fail( function( jqXHR, textStatus, errorThrown ) {
        console.log( 'jqXHR       : ' + jqXHR.status ); // HTTPステータス
        console.log( 'textStatus  : ' + textStatus );   // (null)、timeout、error、abort、parsererror
        console.log( 'errorThrown : ' + errorThrown );  // HTTPステータスのテキスト部分
      })
      // 完了時（成否関わりなく実行）
      .always( function() {
        console.log( 'complete.' );
      });

    });

  });
</script>

</body>
</html>

HTML

ボタンを置いただけのシンプルな画面。
ボタンを押すと、Ajax通信でAPIから時間を取得して表示している。

設定は他にも色々あるので細かくは公式ドキュメントを確認した方が良いが、よく使うと思われるパラメータについては上記サンプルに含めている。

※パラメータや通信結果に対するコールバックの書き方はjQueryのバージョンによって変わるので注意が必要。

Ajaxの基本文例

使用環境

基本サンプル

目次