jQueryでAJAX：複数のボタンから1つのスクリプトへPOSTする
jQueryを使って楽々AJAX。ということで、普通にPOSTをするだけなら素直にできるんだけど、1つのスクリプトに対して、複数のリンクから個別のパラメータをPOSTする方法に迷ったのでメモ。って、分かりにくい状況だな。
つまり、複数のレコードがあって、フラグの on/off を AJAX で切り替えたい時に、当然フラグの on/off は1つのスクリプトで行うけど、対象レコード自体は別々で、それを1つのページ上でやる方法ってこと（それでも分かりにくい）。
もっといい方法を教えてくださいと書いていたら、さっそく別解。というかお手本のような方法を教えてもらえました。ページ下部のコメント／トラックバック欄にて、2つの方法があるので、そちらもご参照くださいませ。
まず、普通にPOSTしてみる
post.html
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() で の value を参照できる。id 指定でなくても、[@name=textdata] や [@type=text] など他の属性で指定する事も出来る。
複数のPOSTを作ってみる
post.html
$("#submitButton").click(function (){ }); を使わずに、それぞれのボタンに onClick を設定することで、複数のボタンから違うパラメータを渡す事が出来る。（というか、onClick を使わないでスマートにやる方法があるような気もするんだけど…。だれか教えてください。）
dataPost(id) という関数を作って、id を渡してあげて、その id を post.php へ value と共に POST し、id,value という形式で書き出す。それを受け取った displayData が .split() を使って、データを半角カンマで区切って、それぞれを割り当てれば完了。
サンプル２
AJAX を使うと画面の遷移なしにデータの受け渡しが出来るからインターフェイスが作りやすかったり、ある意味ユーザビリティの向上につながるけれど、対象ユーザの環境やサイトの立ち位置などを考慮しないと、逆に使いにくいものになるので要注意。
注目エントリー
CakePHPで3キャリア携帯の絵文字を表示する :: Webプログラマ...50usersObjective-Cの勉強を始めたので、みんなもやろうよ :: Webプロ...13usersCakePHPでサムネイル画像を作る :: Webプログラマー＋Webデザイ...28usersCakePHPでメールを送信する :: Webプログラマー＋Webデザイナー...35usersWeb制作で使えるMacソフト :: Webプログラマー＋Webデザイナー...68usersCakePHPで掲示板を作ってみる#1 :: Webプログラマー＋Webデザイ...9usersRubyを使ってTwitterにBASIC認証をしてAPIを利用する :: Webプログ...11usersHatena::Bookmark人気エントリー
Web制作で使えるMacソフト :: Webプログラマー＋Webデザイナー...68usersVirtual PC 2007でUbuntuを入れてみた65usersCakePHPで3キャリア携帯の絵文字を表示する :: Webプログラマ...50usersIMEのオン・オフをソフトを使わずに、分かりやすくする方...43usersCakePHPでメールを送信する :: Webプログラマー＋Webデザイナー...35usersRubyはじめました４：RubyでYahoo!検索APIを使って検索結果を表...29usersCakePHPでサムネイル画像を作る :: Webプログラマー＋Webデザイ...28usersHatena::Bookmark
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Newer: Rubyはじめました5：イテレータで書き換えてみた
Older: JavaScriptで特定の文字列を含む ID のみを取得したい
Comments:2
コメントフォーム：コメントはお気軽にご利用くださいませ。
お名前
メールアドレス
アドレス
情報を記憶しますか？
Yes No
コメント本文 (HTMLタグは使用できません)
Captcha:
画像の中に見える文字を入力してください。
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
}
});
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で複数のボタンから１つのスクリプ...
