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

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

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

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

【htmlのヘッダー部分】

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

{var val_x = $(‘[name=x]’).val();}で、{<select name=”x”>}で選ばれた{value}を取得しています。

{type}へ{POST}を入れています。

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

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

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

【htmlのbody部分】

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

【a_jquery.php】

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

以上

最後に

如何でしたでしょうか?

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

参考になれば幸いです。