jQueryでAjaxの使い方【サンプルコードで解説】

jQuery

jQueryでAjax通信を行う方法をデモ付きサンプルコードで解説します。

Ajaxとは?ページ遷移なしでページを読み込むことが出来る非同期通信です

通常、WEBページを変更させるためには、リロードなどでページの読み込みが必要です。
これを同期通信と呼びます。

それをAjaxは、ページ遷移なしで、jQueryで指定したURLのページのデータやHTMLを取得することが出来ます。
これを非同期通信と呼びます。

jQueryはAjaxを扱えるメソッドが存在し、ページ遷移を介さず、最新データの取得や内容の変更などをお手軽に行うことが出来るのです。

Ajax通信を行う書き方

ajax通信を行う基本的な記述です。

<script>
$(function(){
    $.ajax({
        url: 'ここに取得したいURLまたはディレクトリを入力'
    }).done(function(data){
        /* 通信成功時 */
        
    }).fail(function(data){
        /* 通信失敗時 */
        
    }).always(function(data){
        /* 通信成功・失敗問わず */
        
    });
});
</script>

Ajaxの設定一覧

ajax通信を行う設定プロパティ一覧です。

プロパティ 解説 初期値
url リクエストを行うページ
URL、または「ajax/sample.html」などディレクトリ指定も可
現在のURL
type リクエストが「GET/POST」どちらか GET
data リクエストに送るパラメータ 特になし
dataType 応答データの種類
text,html,xml,json,jsonp,script等
自動判別
timeout 接続がタイムアウトするまでの時間 0(無制限)

Ajaxの実行サンプルコード

では実際に、ajax通信を行ってみましょう。

今回は、「https://kinocolog.com/ajax/test.html」というURLを取得する例で解説します。

「https://kinocolog.com/ajax/test.html」の内容はこちら。

<p>Ajax通信成功!</p>
<p>おめでとう!Ajax通信は成功しました!</p>

そして、このデータを取得し、ページ内に表示させる処理を実装してみました。

サンプルコード
<div class="result">ここにajaxの結果を書き換えます</div>
<input type="button" class="sample_btn" value="ajax通信で取得する">

<script>
$(function(){
    //.sampleをクリックしてajax通信を行う
    $('.sample_btn').click(function(){
        $.ajax({
            url: '/ajax/test.html',
            /* https://kinocolog.com/ajax/test.html というURL指定も可 */
            type: 'GET',
            dataType: 'html'
        }).done(function(data){
            /* 通信成功時 */
            $('.result').html(data); //取得したHTMLを.resultに反映
            
        }).fail(function(data){
            /* 通信失敗時 */
            alert('通信失敗!');
                    
        });
    });
});
</script>
ここにajaxの結果を書き換えます

内容が書き換わっていたら、通信成功です。

通信が成功したかはブラウザの検証ツールで確認

実際に通信が成功しているかは、ブラウザの検証ツールでも確認できます。

Google Chromeでは、「F12キー」を押して、「Network」タブをクリックすると、ajax通信を行ったリクエストが表示されています。

別ブラウザでも大体同じような手順でリクエストの結果を取得できるので、是非ご確認ください。

AjaxとPHPでデータを送信する

PHPは同期通信でデータ処理を行うサーバーサイド言語ですが、ajaxで取得することでページ遷移なしで最新のデータを取得したりできます。

今回は、HTML側で数値を送り、PHP側でその数値が3の倍数か判定するプログラムを組んでみました。

受け取る側のPHP「https://kinocolog.com/ajax/test.php」では以下のプログラムを組みました。

//GET送信が行われているか判定
if(isset($_GET['no'])){
    //数値かどうか判定
    if(ctype_digit($_GET['no'])){
        $no = (int)$_GET['no'];
        if(($no % 3) == 0){
            echo '3の倍数です!!';
        }else{
            echo '3の倍数ではありません。';
        }
    }else{
        echo '数字列ではありません。';
    }
}else{
    echo '数字が送られていません。';
}
サンプルコード
<div class="result">ここにajaxの結果を書き換えます</div>
<input type="number" value="10" class="input_number" placeholder="数値を入力してください">
<input type="button" class="sample_btn" value="ajax通信で取得する">

<script>
$(function(){
    //.sampleをクリックしてajax通信を行う
    $('.sample_btn').click(function(){
        $.ajax({
            url: '/ajax/test.php',
            type: 'GET',
            dataType: 'text',
            data : {
                no : $('.input_number').val()
            }
        }).done(function(data){
            /* 通信成功時 */
            $('.result').text(data); //取得したHTMLを.resultに反映
            
        }).fail(function(data){
            /* 通信失敗時 */
            alert('通信失敗!');
                    
        });
    });
});
</script>
ここにajaxの結果を書き換えます

送った数値の判定結果がしっかり反映されていることが分かります。

AjaxとPHP+MySQLでデータベースからデータを取得する

Ajaxを使用して、PHPからMySQLデータベースに接続し、データを取得するサンプルです。

PHPからデータベースへの接続はPDOオブジェクトを使用します。

そしてデータベースのテーブルは、このようなドラえもんのキャラクターから、「性別」と「人間orロボット」を選択し、該当するキャラクターを取得します。

table名:doraemon_users
id name gender type
1 のび太 man human
2 ドラえもん man robot
3 ジャイアン man human
4 スネ夫 man human
5 しずか woman human
6 ドラミ woman robot

次に、PHPからデータベースに接続し、SELECTクエリを実行します。

/*
PDOオブジェクト生成は省略
*/

if(isset($_GET['gender']) && isset($_GET['type'])){
    $gender = $_GET['gender']; //性別を取得
    $type = $_GET['type']; //タイプを取得
    
    $sql = "SELECT name 
            FROM doraemon_users
            WHERE gender = :gender
            AND type = :type";
    $sth = $pdo -> prepare($sql);
    $sth -> bindValue(':gender', $gender, PDO::PARAM_STR);
    $sth -> bindValue(':type', $type, PDO::PARAM_STR);
    $sth -> execute();
    $aryResult = $sth -> fetchAll(PDO::FETCH_COLUMN);
    //データベースの取得結果配列をjson形式に変換
    echo json_encode($aryResult);
}else{
    echo [];
}
サンプルコード
<select name="gender">
    <option value="man">男の子</option>
    <option value="woman">女の子</option>
</select>
<select name="type">
    <option value="human">人間</option>
    <option value="robot">ロボット</option>
</select>
<div class="result">ここにajaxの結果を書き換えます</div>
<input type="button" class="sample_btn" value="ajax通信で取得する">

<script>
$(function(){
    //.sampleをクリックしてajax通信を行う
    $('.sample_btn').click(function(){
        $.ajax({
            url: '/ajax/test_db.php',
            type: 'GET',
            /* json形式で受け取るためdataTypeを変更 */
            dataType: 'json',
            data : {
                gender : $('[name="gender"]').val(),
                type : $('[name="type"]').val()
            }
        }).done(function(data){
            /* 通信成功時 */
            var html_response = '<ul>';
            //json形式で受け取った配列を.each()で繰り返し、ul > liリストにする
            $.each(data, function(key, value){
                html_response += '<li>' + value + '</li>';
            });
            html_response += '</ul>';
            $('.result').html(html_response); //取得したHTMLを.resultに反映
            
        }).fail(function(data){
            /* 通信失敗時 */
            alert('通信失敗!');
                    
        });
    });
});
</script>
ここにajaxの結果を書き換えます

無事データベースから取得したデータが反映されました。

PHP+MySQL+Jqueryの合わせ技ですが、覚えるとよりリアルタイムなデータをサイトに表示できます。

PDOでクエリの配列で取得するfetchメソッドと、jQueryの繰り返しを操作する.eachメソッドをまとめたページも一度ご確認ください。

【PHP】PDOのfetchで取得できる配列パターン一覧
PHPのPDOオブジェクトのメソッドfetchとfetchAllで取得できる配列の種類を一覧でまとめました。各種サンプルコードのデモもあわせて掲載しております。
jQueryのeachで配列や要素を繰り返す方法【サンプル有】
jQueryのeachメソッドの使い方をまとめました。要素や配列など、多岐にわたって活用する関数です。使用頻度が高いメソッドなどで仕様を把握しておきましょう。

AjaxでPHPに配列をPOSTする

配列のデータをPHPに送信したい場合の書き方についてもまとめておきます。

一次元配列の場合

一次元配列の場合は、単純にdataに配列を突っ込むだけで受け渡しが可能です。

<script>
$(function(){
    $.ajax({
        url: '/ajax/test_array.php',
        type: 'POST',
        dataType: 'text',
        data : {
            ary : ['a', 'b', 'c']
        }
    }).done(function(data){
        
    }).fail(function(data){
        
    });
});
</script>

受け取るPHP側で、print_r関数を使用して結果をチェックしてみます。

print_r($_POST['ary']);

結果、ちゃんと受け渡しされていることが分かります。

Array
(
    [0] => a
    [1] => b
    [2] => c
)

連想配列の場合

二次元以上の多次元配列オブジェクトも、同様にPHPで受け渡しが可能です。

<script>
$(function(){
    var aryCmp = [{'id' : 'apple', 'name' : 'りんご'}, {'id' : 'banana', 'name' : 'バナナ'}, {'id' : 'grape', 'name' : 'ぶどう'}];
    
    $.ajax({
        url: '/ajax/test_array.php',
        type: 'POST',
        dataType: 'text',
        data : {
            ary : aryCmp
        }
    }).done(function(data){
    }).fail(function(data){
    });
});
</script>

PHPにて、$_POST['ary']をprint_rで展開すると、結果はこのようになります。

Array
(
    [0] => Array
        (
            [id] => apple
            [name] => りんご
        )

    [1] => Array
        (
            [id] => banana
            [name] => バナナ
        )

    [2] => Array
        (
            [id] => grape
            [name] => ぶどう
        )

)


Ajaxで「htmlの取得」、「PHPにデータ送信」、「PHP+MySQLデータベースから取得」についてまとめました。

PHPとうまく連携させることで、表現の幅がグッと増えるので是非活用してください。

以上、jQueryでAjaxの使い方、でした。

コメント

タイトルとURLをコピーしました