jqueryのajaxでは押されたボタンのnameと値が送信されない

jqueryを用いたajaxでは押されたボタンの値が送られない

jqueryを用いるとajax通信のjavascript側を簡単に作成することが出来ます。ただ、押されたボタン（submitやbutton）のnameとvalueがデフォルトでは取得できておらず、PHPなどのサーバー側に送られていないので注意が必要です。

これはクリックイベントリスナーでもsubmitイベントリスナーでも同様で、どちらのイベントを起点にしても押されたボタンのnameとvalueはサーバー側に送られません。

この記事ではjqueryのajax処理でsubmitやbuttonの値をサーバー側に送るための方法を紹介します。

jqueryのajax通信部分に少し追加しよう

押されたsubmitやbuttonの値はそのままでは送られないので自分でPHP等サーバー側に送ってあげる必要があります。

こんな感じです。この例ではsubmitやbutton自体にクリックのイベントリスナーをつけています。formに対して設定するsubmitイベントリスナーは使っていません。なので$(this)は押されたボタンを指します。色つきの部分がボタンのnameとvalueを実際に追加している部分です。

$.ajax({
url: '○○.php',
type: form.attr('method'),// GET or POST。htmlでの指定に従う
data: form.serialize()+'&'+$(this).attr('name')+'='+$(this).val(),
timeout: 10000,  // ミリ秒
}).then(
.
.
.

こんな風にPHPに送られるdataに『&name=value』の書式になるように自分で値を追加してあげるだけで、サーバー側に押されたボタンのnameと値が送られます。またこれはGETでもPOSTでも同じですので、特に送信方法を意識することなく送ることが出来ます。

jqueryのajax通信では自分でボタンの値を追加しよう

ということで少し泥臭い方法になってしまいますが、jqueryのajax通信ではそのままだと押されたボタンの値がサーバー側に送信されないので自分で追加してあげる必要があるということでした。

追加の方法はGETでもPOSTでも同じで『&name=value』の書式になるようにajaxのdataパラメータに自分で追加してあげるのでした。

もう少しスマートな方法が思いつけばまた紹介しようと思います。