jQueryのAjaxを使って、ページ遷移せずにデータをPOSTする方法｜神戸ホームページ制作会社ユニファースの代表ブログ

表題の方法について解説しているページは多いのですが、サンプルコードが中々無かったので記事にしました。

まずは、サンプルをご覧ください。

動作的には、select すると、裏側で、 a_ajax.php へパラメーターを投げて、返ってきたデータをページへ書き込むという処理をしています。

では早速サンプルコードです。

【htmlのヘッダー部分】

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 
    $('select').change(function() {
 
var val_x = $('[name=x]').val();
var val_y = $('[name=y]').val();


        $.ajax({
            type: "POST",
            url: "a_ajax.php",
            data: {
                "x":val_x,
                "y":val_y
            },
            success: function(data){
                $('#goukei').text(data);
 
            }
        });
 
 
    });
 
});


</script>

$(function() {

$('select').change(function() {

var val_x = $('[name=x]').val();

var val_y = $('[name=y]').val();

$.ajax({

type: "POST",

url: "a_ajax.php",

data: {

"x":val_x,

"y":val_y

success: function(data){

$('#goukei').text(data);

}

});

</script>

selectの値が変更されたら、jQueryが実行するようにしています。

｛var val_x = $('[name=x]').val();｝で、｛<select name="x">｝で選ばれた｛value｝を取得しています。

｛type｝へ｛POST｝を入れています。

｛url｝へ裏側で実行するプログラム名を入れています。

｛data｝で、プログラムへPOSTするパラメーターを記述しています。

｛success｝のところは、POSTが成功したら、｛data｝の変数へ値を代入するという意味です。

【htmlのbody部分】

<p><span class="title">一つ目の数字：</span><br />
<select name="x">
<option value="-1">選んで下さい</option>
<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>
</select>
</p>


<p><span class="title">二つ目の数字：</span><br />
<select name="y">
<option value="-1">選んで下さい</option>
<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>
</select>
</p>

<p><span class="title">一つ目の数字：</span><br />

<option value="-1">選んで下さい</option>

</select>

</p>

<p><span class="title">二つ目の数字：</span><br />

<option value="-1">選んで下さい</option>

</select>

</p>

普通のセレクトボックスです。｛form｝で囲んだりはしていません。ヘッダー部分の解説でも書いていますが、｛select｝の値を変更すると、jQueryが発火するように記述している為です。

【a_jquery.php】

<?php
//京都

$x = $text = $y = null;
$x = $_POST['x'];
$y = $_POST['y'];

$text = $x + $y;

if($x == -1 && $y == -1){
	$text = "一つ目の数字と二つ目の数字を選んで下さい";
}elseif($x == -1 && $y > -1){
	$text = "一つ目の数字を選んで下さい";
}elseif($x > -1 && $y == -1){
	$text = "二つ目の数字を選んで下さい";
}



echo $text;


?>

<?php

//京都

$x = $text = $y = null;

$x = $_POST['x'];

$y = $_POST['y'];

$text = $x + $y;

if($x == -1 && $y == -1){

$text = "一つ目の数字と二つ目の数字を選んで下さい";

}elseif($x == -1 && $y > -1){

$text = "一つ目の数字を選んで下さい";

}elseif($x > -1 && $y == -1){

$text = "二つ目の数字を選んで下さい";

}

echo $text;

何の変哲もない、データがPOSTされた際の実行プログラムです。｛echo｝で数値をhtmlへ返します。

以上

最後に

如何でしたでしょうか？

ずっと前に、ページ遷移せずにリロードする方法という記事を書いていますが、これのPOSTバージョンですね。

参考になれば幸いです。

最後に

お問い合わせ

関連記事