端くれプログラマの備忘録 jQuery [jQuery] 基本メモ: jQuery.getメソッド

[jQuery] 基本メモ: jQuery.getメソッド

HTTP(GET)通信でページを読み込む。

jQuery.get( url, data, callback )

サンプルコード

<p>
    <input type="text" name="name" id="name">
    <input type="button" value="Greet" id="greet">
</p>
<div id="result"></div>
$('#greet').click(function() {
    $.get('greet.php', {
        name: $('#name').val(), //データ
    }, function() {
        $('#result').html(data); //コールバック
    })
});

greet.php

echo htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8");

JSON形式でやり取りする場合

$('#greet').click(function() {
    $.get('greet.php', {
        name: $('#name').val() //データ
    }, function(data) {
        $('#result').html(data.message + '(' + data.length + ')'); //コールバック
 })

greet.php

$rs = array(
    'message' => htmlspecialchars("Hi! ". $_GET['name'], ENT_QUOTES, "utf-8"),
    'length' => strlen($_GET['name']),
);
header('Content-type: application/json; charset=utl-8');
echo json_encode($rs);

参考サイト

jQuery.get( url, data, callback ) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/jQuery.get/+url,+data,+callback+/