AjaxでPOSTした結果を受け渡す

例えば、年月をselectboxで選択したらAjaxでPOSTした結果を受け取る場合。

jQueryを使うのでライブラリを読み込んでおく

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Javascriptは

    $(document).ready(function()
    {

        /**
         * 送信ボタンクリック
         */
        $('#month').change(function()
        {
            //POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
            var data = {month : $('#month').val()};

            /**
             * Ajax通信メソッド
             * @param type  : HTTP通信の種類
             * @param url   : リクエスト送信先のURL
             * @param data  : サーバに送信する値
             */
            $.ajax({
                type: "POST",
				data: data,
                url: "sales_print_month.php",
                /**
                 * Ajax通信が成功した場合に呼び出されるメソッド
                 */
                success: function(data, dataType)
                {
                    //successのブロック内は、Ajax通信が成功した場合に呼び出される

                    //PHPから返ってきたデータの表示
                    $("#result").html(data);
                },
                /**
                 * Ajax通信が失敗した場合に呼び出されるメソッド
                 */
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    //通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

                    //this;
                    //thisは他のコールバック関数同様にAJAX通信時のオプションを示します。

                    //エラーメッセージの表示
                    alert('Error : ' + errorThrown);
                }
            });
            
            //サブミット後、ページをリロードしないようにする
            return false;
        });
    });

ここでは、monthを渡す。

呼び出す方のhtml部分は

<form method="post">
月：
<select id='month'>
	<option value="1">1月</option>
	<option value="2">2月</option>
	<option value="3">3月</option>
	<option value="4">4月</option>
	<option value="5">5月</option>
	<option value="6">6月</option>
	<option value="7">7月</option>
	<option value="8">8月</option>
	<option value="9">9月</option>
	<option value="10">10月</option>
	<option value="11">11月</option>
	<option value="12">12月</option>
</select>

</form>
<div id="result"></div>

呼び出されるsales_print_month.phpは

<table class="table table-hover">
<thead><tr>
	<th>教室名</th>
	<th>見込</th>
	<th>実績</th>
	<th>差異</th>
	<th>更新年月日</th>
</tr></thead>
<tbody>

<?php
//実績の取得(グループ順に表示)
$sales=array();
$sumgoal = 0;
$sumresult = 0;
$sql = "SELECT * FROM `result` ,`class` ";
$sql .= " WHERE `class`.`classid` = `result`.`classid` ";
$sql .= " AND `year` = ?";
$sql .= " AND `month` = ?";
$sql .= " ORDER BY `class`.`groupid` ASC, `class`.`classid` ASC";
$stmt = $dbh->prepare($sql);
$stmt->execute(array($year, $month));
while($row = $stmt -> fetch()) {
	print('<tr>');
	print('<td class="center">' . $class[$row['classid']] . '</td>');
	print('<td class="right">' . number_format($goal[$row['classid']]) . '</td>');
	print('<td class="right">' . number_format($row['result']) . '</td>');
	print('<td class="right">' . str_replace("-", "▲", number_format(strval(intval($row['result']) - intval($goal[$row['classid']])))) . '</td>');
	print('<td class="center">' . $row['date'] . '</td>');
	print('</tr>' . "\n");
	$sumgoal += $goal[$row['classid']];
	$sumresult += $row['result'];
}
?>


<!-- 合計欄の表示 -->
<tr>
<td class="center"><h4>合計</h4></td>
<td class="right"><h4><?php print(number_format($sumgoal)) ?></h4></td>
<td class="right"><h4><?php print(number_format($sumresult)) ?></h4></td>
<td class="right"><h4><?php print(number_format($sumresult - $sumgoal)) ?></h4></td>
<td></td>
</tr></tbody></table>

divの間に流し込むので、その部分だけを表示するように。

セレクタの使い方、難しいなあ。