jQueryでAJAX：複数のボタンから1つのスクリプトへPOSTする

jQueryを使って楽々AJAX。ということで、普通にPOSTをするだけなら素直にできるんだけど、1つのスクリプトに対して、複数のリンクから個別のパラメータをPOSTする方法に迷ったのでメモ。って、分かりにくい状況だな。

つまり、複数のレコードがあって、フラグの on/off を AJAX で切り替えたい時に、当然フラグの on/off は1つのスクリプトで行うけど、対象レコード自体は別々で、それを1つのページ上でやる方法ってこと（それでも分かりにくい）。

2007/09/25 追記

もっといい方法を教えてくださいと書いていたら、さっそく別解。というかお手本のような方法を教えてもらえました。ページ下部のコメント／トラックバック欄にて、2つの方法があるので、そちらもご参照くださいませ。

まず、普通にPOSTしてみる

post.html

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function () {
	$("#submitButton").click(function () {
		$.post("post.php",
		{
			textdata : $("input[@id=textdata]").val()
		},
		displayData);

		return false;
	});
});

function displayData(data) {
	$("#textData").html(data);
}
</script>

<input type="text" name="textdata" id="textdata">
<input type="button" id="submitButton">

<p id="textData"></p>

post.php

<?php
if(isset($_POST['textdata']) && $_POST['textdata'] != ''){
	print htmlspecialchars($_POST['textdata'],ENT_COMPAT);
}
?>

post.php へ id が textdata の value を POST で渡すスクリプト。$.postを使う事で、POSTでデータを渡すことが出来る。

• サンプル１

$.post(uri, [data], [callback]);

第2引数の data はもちろん複数のパラメータを渡す事が出来る。

$.post(post.php, { data1: value1, data2 : value2 }, displayData);

$(input[@id=textdata].val() で <input id="textdata"> の value を参照できる。id 指定でなくても、[@name=textdata] や [@type=text] など他の属性で指定する事も出来る。

複数のPOSTを作ってみる

post.html

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function dataPost(idNum){
	$.post("post.php",
	{
		textdata : $("input[@id=textdata" + idNum + "]").val(),
		id : idNum
	},
	displayData);
}

function displayData(data) {
	list = data.split(",");
	$("#textData" + list[0] ).html(list[1]);
}
</script>

<input type="text" name="textdata1" id="textdata1">
<input type="button" onClick="javascript:dataPost('1');" >

<input type="text" name="textdata2" id="textdata2"> 
<input type="button" onClick="javascript:dataPost('2');">

<p id="textData1"></p>
<p id="textData2"></p>

post.php

<?php
	if(isset($_POST['textdata']) && $_POST['textdata'] != ''
		&& isset($_POST['id']) && preg_match("/^[0-9]+$/",$_POST['id'])){
		print $_POST['id'] . ',' . htmlspecialchars($_POST['textdata'],ENT_COMPAT);
	}else{
		print htmlspecialchars($_POST['id'],ENT_COMPAT) . ',error';
	}
?>

$("#submitButton").click(function (){ }); を使わずに、それぞれのボタンに onClick を設定することで、複数のボタンから違うパラメータを渡す事が出来る。（というか、onClick を使わないでスマートにやる方法があるような気もするんだけど…。だれか教えてください。）

dataPost(id) という関数を作って、id を渡してあげて、その id を post.php へ value と共に POST し、id,value という形式で書き出す。それを受け取った displayData が .split() を使って、データを半角カンマで区切って、それぞれを割り当てれば完了。

• サンプル２

AJAX を使うと画面の遷移なしにデータの受け渡しが出来るからインターフェイスが作りやすかったり、ある意味ユーザビリティの向上につながるけれど、対象ユーザの環境やサイトの立ち位置などを考慮しないと、逆に使いにくいものになるので要注意。