2011年04月16日に投稿

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

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

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

post.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
  $('#sw').click(
    function(){
      $.post(
        'post.php',
        {
          'pd': 'こんにちは'
        },
        function(data){
          alert(data);
        }
      );
    }
  );
});
</script>
</head>
<body>
  <a href="javascript: void(0)" id="sw">switch</a><br />
</body>
</html>

<html>

<head>

$(function(){

$('#sw').click(

function(){

$.post(

'post.php',

{

'pd': 'こんにちは'

function(data){

alert(data);

}

);

}

);

});

</script>

</head>

<body>

<a href="javascript: void(0)" id="sw">switch</a><br />

</body>

</html>

6行目

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

8行目から16行目

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

post.php

<?php
  echo 'your post data is ' . $_POST['pd'];

<?php

echo 'your post data is ' . $_POST['pd'];

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

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

ajax.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
  $('#sw').click(
    function(){
      $.ajax({
        type: 'post',
        url: 'post.php',
        data: {
          'pd': 'こんにちは'
        },
        success: function(data){
          alert(data);
        }
      });
    }
  );
});
</script>
</head>
<body>
  <a href="javascript: void(0)" id="sw">switch</a><br />
</body>
</html>

<html>

<head>

$(function(){

$('#sw').click(

function(){

$.ajax({

type: 'post',

url: 'post.php',

data: {

'pd': 'こんにちは'

success: function(data){

alert(data);

}

});

}

);

});

</script>

</head>

<body>

<a href="javascript: void(0)" id="sw">switch</a><br />

</body>

</html>

8行目から17行目

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

type

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

url

post 送信先を指定します。

data

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

success

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

ajax JavaScript jQuery post

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

Web.fla » 処理メモ：jqueryの$.postを利用してCSVを読み込むより:

2012/03/31 16:56

[…] [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をアラート } } }); […]
[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル « Codaholic - ミイラコードより:

2012/04/02 12:58

[…] http://codaholic.org/?p=716 /* […]
管理画面からajaxでpost送信してデータを更新する | wordpress カスタマイズより:

2012/08/13 00:58

[…] jqueryでのpostの参考は、http://codaholic.org/?p=716　です。 […]
PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた | かねしろぐ - 兼城駿一郎(@pinkroot )のライフログより:

2012/12/03 00:00

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