【初心者向け】jQueryでAjax通信を実装する方法 | トンボのようにまっすぐ進んでいたい

jQueryを使ってAjax通信を実装する方法について解説します。

Contents

1 Ajaxとは
2 Ajaxの実装方法
3 Ajax通信確認

Ajaxとは

Ajaxとは「Asynchronous JavaScript + XML」の略で、JavaScriptとXMLを使って非同期にサーバと通信する技術です。
画面遷移をさせずに、サーバと通信して処理を進めたい場合に使えます。

Ajaxの実装方法

Ajaxには、以下のような方法があります。

素のJavaScriptで実装する
jQueryやaxiosなどのライブラリを使って実装する

今回は、jQueryを使った実装を紹介します。
※jQueryのslim版では、ajaxが使えないため注意が必要です。

開発環境

開発環境は、Dockerでローカルマシン上に構築しています。

DockerでPHP+Nginx+MySQLの開発環境を作る方法は、以下の記事にまとめていますのでご参考にどうぞ。

【Docker】ローカルマシンにPHP+Nginx+MySQLの開発環境を作る方法

フォルダ構成

ajax
│
├── php
│   ├── Dockerfile
│   └── php.ini
├── nginx
│   └── nginx.conf
└── www
    └── html
        ├── index.html
        ├── main.js
        └── greet.php

phpとnginxコンテナの設定方法は本記事の範囲外のため省略します。

index.html

jQueryは、公式サイトのCDN版を使います。
>> jQueryの公式サイトはこちら

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Ajax Practice</title>
</head>
<body>
    <!-- ここに名前を入力 -->
    <input id="name" type="text">
    <!-- 送信ボタン -->
    <input id="submit" type="button" value="送信">
    
    <!-- 結果表示エリア -->
    <div id="result"></div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- main.js -->
    <script src="main.js"></script>
</body>

</html>

main.js

$('#submit').on('click', () => {
    // Ajax通信を開始する
    $.ajax({
        url: 'greet.php',
        type: 'post',
        dataType: 'json', // JSON形式にパースされたオブジェクトで返ってくる
        data: {
            // 入力した名前を送信
            name: $('#name').val(),
        },
    }).done((response) => {
        // 成功したら、メッセージをフロントに表示する
        $('#result').text(response.greet);
    }).fail((XMLHttpRequest, textStatus, errorThrowns) => {
        // エラーを表示する
        console.log('XMLHttpRequest: ' + XMLHttpRequest);
        console.log('textStatus: ' + textStatus);
        console.log('errroThrowns: ' + errorThrowns);
    });
});

greet.php

<?php

// Content-TypeをJSONに指定する
header('Content-Type: application/json; charset=UTF-8');

// $_POST['name']をエラーを出さないように文字列として安全に展開する
// post情報をHTTPヘッダから直接参照する
$name = (string)filter_input(INPUT_POST, 'name');

// 空文字でないかチェック
if ($name === '') {
    $error = '名前を入力してください';
}

if (!isset($error)) {
    // エラーがない場合、あいさつ文を返す
    $greet = "こんにちは、{$name}さん！";
    // JSON {'greet': "こんにちは、{$name}さん!"} を返す
    echo json_encode(compact('greet'));
} else {
    // エラーの場合、レスポンスコード400 Bad Requestを返す
    http_response_code(400);
    // JSON {'error': '名前を入力してください'} を返す
    echo json_encode(compact('error'));
}

フォームに意図しない値が入力された場合を想定して、サーバ側で値のチェックを行います。
今回の例では、入力された文字が空文字でないか確認しています。

値の整合性チェックの記述については、以下の記事を参考にしています。
>> 【Qiita記事】JavaScript(jQuery)からPHPのAPIを利用する