jQueryでPOSTリクエストを使った非同期通信を行う方法
作成日:2010.07.26
jQueryを使ったPOSTメソッドによる非同期通信で、データ送信から結果表示までの流れを解説します。指定URLへデータを送信し、返ってきたデータをページ内に出力する方法をサンプルコード付きで紹介。
error この記事は最終更新日から14年以上が経過しています。
jQuery を使って POSTメソッドで別の CGIスクリプトにデータを送り、返った結果をページ内に出力を行なう、という処理の方法の解説です。
jQuery で POSTメソッドによる非同期通信は、「post( 通信先URL, 送信するデータ, 返った結果の処理, 送信データ形式) 」という形で指定します。
例えば、「./test.cgi」に対して「mode=test」「name=tatsuya」というデータを送信し、test.cgi が返した結果を「div id="test"」の中に出力したい場合は、以下のようになります。
$.post(
// 通信先URL
"./test.cgi",
// 送信するデータ
{
mode:"test",
name:"tatsuya"
},
// 返った結果の処理
function(data){
$("#test").html(data);
}
);
第二引数以降は省略可能なので、第四引数は省略しています。
なお、GETメソッドで通信したい場合は、同様に「get(通信先URL, 送信するデータ, 返った結果の処理, 送信データ形式)」で非同期通信を行なえます。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
チェックボックス操作のためのjQuery基本メモ
2025.02.05
jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。
jQueryでフォームのreadonly属性を操作する方法
2025.02.04
jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。
ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。