jQuery.ajax()の使い方

Tag:

jQueryでAjaxを利用した例を示します。

下記のサンプルでは、ブラウザ上のclickを押すとページ遷移せずにサーバへアクセスします。そして受け取った結果をブラウザ上に表示してます。(サンプルを参照)

Ajaxを利用したサンプルソース
ソース
html
<div id="btn">click</div>
<div id="result"></div>
css
#btn { 
    width: 100px;
    padding: 30px 0px;
    text-align: center;
    background-color: #bbd4ee;
}
#btn:hover { 
    opacity:0.7; 
    filter: alpha(opacity=70);
}
javascript
$(function() {
    $('#btn').click(function() {
        $.ajax({
            url: 'return.php',
            type: 'POST',      // GET or POST
            dataType: 'json',  // JSONデータを受信する場合
            cache: 'false',
            async: 'false',
            //サーバ側にPOSTで渡すデータ
            data: {
                'data1': [20, 40],
                'data2': {'plus': 10, 'plus2': -5}
            }
        }).done(function(data) {  // 通信成功時のコールバック関数指定。
            // dataにレスポンス結果が格納されている。
            if (data['result'] === 1) {
                for (var i in data['data']) {
                    $("#result").append("<p>(" 
                                         + data['data'][i]['org'] + 
                                         ") + (" 
                                         + data['data'][i]['plus'] + 
                                         ") = " 
                                         + data['data'][i]['equal'] + 
                                         "</p>");
                }
            } else {
                $("#result").append("<p>ERROR</p>");
            }
        }).fail(function(xhr, status, error) {  // 通信失敗時のコールバック関数指定
            var err_message = "【失敗】";
            alert(err_message);
        });
    });
});

8行目のasyncをfalseにすると同期処理になります。デフォルトのasyncはtrueなので非同期処理です。

サーバ側(php)
<?php
$result = array('result' => 0);
$result += array('data' => null);
$data1 = $_POST['data1'];
$data2 = $_POST['data2'];


if (is_numeric($data2['plus']) && is_numeric($data2['plus2'])) {  
    $flg = 0;
    
    foreach ($data1 as $index => $data) {
        if (is_numeric($data)) {
           $result['data'][] = array('org' => $data, 
                                     'plus' => $data2['plus'], 
                                     'equal' => $data + $data2['plus'] );
           $result['data'][] = array('org' => $data, 
                                     'plus' => $data2['plus2'], 
                                     'equal' => $data + $data2['plus2'] );
        } else {
            $flg = 1;
            break;
        }
    }
    
    if ($flg === 0) {
        $result['result'] = 1;
    }
}

header("Content-Type: application/json; charset=utf-8");
echo json_encode($result);
exit;
?>

Ajaxでサーバーから取得するファイルの文字コードは、「UTF-8」しか使えません。UTF-8以外の文字コードにすると文字化けします。

サーバ側では、json_encode関数を利用し、phpのデータ形式をjavascript側で扱えるデータ形式に変換してレスポンスを返しています。

上記ソースでは、次のようなjsonデータをレスポンスで返します。

{"result":1,"data":[{"org":"20","plus":"10","equal":30},{"org":"20","plus":"-5","equal":15},{"org":"40","plus":"10","equal":50},{"org":"40","plus":"-5","equal":35}]}

このままだと確認しずらい場合、json_encode関数の第2引数に、JSON_PRETTY_PRINTという定数を指定します。

echo json_encode( $result, JSON_PRETTY_PRINT );

下記のように、自動的に改行とインデントが付与されます。

{
    "result": 1,
    "data": [
        {
            "org": "20",
            "plus": "10",
            "equal": 30
        },
        {
            "org": "20",
            "plus": "-5",
            "equal": 15
        },
        {
            "org": "40",
            "plus": "10",
            "equal": 50
        },
        {
            "org": "40",
            "plus": "-5",
            "equal": 35
        }
    ]
}

スポンサーリンク