Ajax 初めの一歩

非常にいまさらなんですが、Ajaxの基礎の基礎について書きたいと思います。

使用言語はPHPにします。

値を入力して送信、サーバで計算してローカルに値を戻します。
必要なファイルはtest.htmlとtest.phpです。
test.htmlにアクセスして送信ボタンを押すとtest.phpにデータが送信され
結果をtest.htmlに戻して値を表示します。

f:id:toshtone:20150913234014p:plain

f:id:toshtone:20150913234439p:plain

htmlはこんな感じ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function func() {
    $.ajax({ type: "POST", url: "./test.php",
        data: {
            num1 : $(val1).val(),
            num2 : $(val2).val()
        },
        dataType: 'json',
        success: function(data) {
            target = document.getElementById("output");
            target.innerHTML = data.msg;
        }
    });
}
</script>
</head>

<body>
    <center>
    <label>値1<input type="text" name="val1" id="val1" size="3" maxlength="3"> X </label>
    <label>値2<input type="text" name="val2" id="val2" size="3" maxlength="3"></label>
    <input type="button" value="送信" onclick="func();" />
    <div style="text-align:center" id="output"></div>
    </center>
</body>

</html>

続いてphp

<?PHP
$num1 = (int)$_POST['num1'];
$num2 = (int)$_POST['num2'];
$rtnVal = $num1 * $num2;
header("Content-Type: application/json; charset=utf-8");
echo json_encode( array( 'msg' => $rtnVal ) );
?>

シンプルな例ということで。

orz.conf

技術メモ✍

Ajax 初めの一歩