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

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

  • Posted by: zaru
  • 2007年9月24日 02:50
  • JavaScript

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

Comments:2

re_guzy 2007年9月24日 18:19

こんな感じでどうでしょう。動作確認はしてませんが・・・

$("input[@type=button]").click(function() {
 var pre = $(this).prev();
 var idNum = /textdata(\d+)/.exec(pre.attr("id"))[1];
 $.post("post.php",
 {
  textdata : pre.val(),
  id : idNum
 }
});

ZARU 2007年9月25日 09:17

> re_quzyさん
すばらしい! $(this).prev(); で前のオブジェクトを取得できるんですね…。初めて知りました。
だんぜんこっちの方がスマートですね(onClick=""を使うよりも)。
ありがとうございました。勉強になります。

Comment Form

Trackbacks:1

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/348
Listed below are links to weblogs that reference
jQueryでAJAX:複数のボタンから1つのスクリプトへPOSTする from Webプログラマー+WebデザイナーなZARU日記
jQueryで複数のボタンから1つのスクリプトへPOSTする from Humming Via Kitchen 2007-09-24 (月) 16:43
WEBプログラマー+WEBデザイナーなZARU日記 さんの コチラのエントリー より。 「 jQuery を使ってAjaxで複数のボタンから1つのスクリプ...

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

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top