2011年04月16日に投稿

[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル

jQuery で POST 送信をすることができるメソッドに ajax と post があります。その 2 つのメソッドを用いた簡単なサンプルコードです。それぞれ post.php に POST 送信を行い、レスポンスをアラートで表示します。


まずは post メソッドの使用例です。

post.html

6行目

id が sw に指定された要素がクリックされた時に実行するように定義します。

8行目から16行目

post メソッドの引数として、post 先のファイル名、post するパラメータの連想配列、レスポンスを受け取った後に実行する関数を渡します。レスポンスを受け取った後に実行する関数には data が引数として渡されていますが、data がレスポンスそのものになります。

post.php

送信されたリクエストを受け付けるスクリプトです。POST 送信されたデータを表示するだけです。

次に ajax メソッドの使用例です。

ajax.html

8行目から17行目

ajax メソッドに渡す引数は連想配列になります。渡している内容は下記の通りです。

type

post 送信を行う場合は post とします。

url

post 送信先を指定します。

data

post メソッドと同様にパラメータを連想配列で指定します。

success

リクエストが成功したときに実行される関数を定義します。こちらも post と同様にレスポンスを alert で表示するだけの関数です。

関連記事

4 Responses to “[jQuery] post メソッドと ajax メソッドを使って POST 送信を行うサンプル”

  1. […] [jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル //ポイント1:$.postのコールバック関数でdataを受け取る $.post("loadcsv.php","",function(data){ //取得したデータの長さ お店 for(var i=0; i<data.length; i++){   //1行目はタイトルなので省く if(i!=0){ //ポイント2:[.]シンクタックでデータにアクセス   var name=data[i].name;   alert(name); //各データのnameをアラート } } }); […]

  2. […] jqueryでのpostの参考は、http://codaholic.org/?p=716 です。 […]

  3. […] – PHPからMySQLデータベースに接続する方法 [jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル JQueryとPHPで作るシンプルなAJAX PHPで簡単なAjaxプログラムを作ろう (その1) […]

Leave a Reply