【Ajax】フォームの値（データ）をサーバーに送信する

公開日：2014/06/12

更新日：2014/05/08

カテゴリー: Ajax

ユーザーがフォームに入力した情報をAjaxでサーバーに送信する方法を説明しています。

フォーム送信の基本

HTMLでフォームを作成し、フォームに情報を入力してsubmitボタンを押すと指定のサーバー（指定のファイル）にデータが送信されます。

このとき、フォームに入力された情報はブラウザが自動的にシリアライズ（フォーム送信形式の文字列に変換すること）しています。

そのためAjaxでフォームに入力された情報を送信する場合、送信する値はシリアライズしなければなりません。

シリアライズを行う方法

jQueryにはフォームに入力された値をシリアライズするメソッドがあります。

変数= $('フォームのエレメント').serialize();

これを利用すればフォームに入力された値をシリアライズすることででき、これをパラメータとすることでAjax送信ができます。

フォームの値（データ）をサーバーに送信する

ということで、フォームを作成し、それに内容を書き込んでAjaxでサーバーに送信したいと思います。

index.html

index.htmlを作成し、以下を記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>サンプルプログラム</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
        function action(){
          var str = $('#testform').serialize();
          $.getJSON('get-data.php', str, csschange);
        }
	function csschange(result){
	  $('#output').text(result.message);
	  $('#output-namae').text(result.namae);
	  $('#output-comment').text(result.comment);
	}
      //-->
    </script>
  </head>

  <body>
     <form id="testform" onsubmit="return false;">
       <p>名前を入力してください<br />
       <input type="text" name="namae"></p>
       <p>コメントを入力してください<br />
       <input type="text" name="comment"></p>
     </form>
     <p><input type="button" value="サンプルの実行" onclick="action();"></p>
     <div id="output">get-data.phpにフォームに入力された情報をGET送信し、PHPの処理結果をJSON形式で受け取り、ここにテキストを表示します。</div>
     <div id="output-namae"></div>
     <div id="output-comment"></div>
  </body>
</html>

get-data.php

次にGET送信されてきたデータを受け取るPHPファイルget-data.phpを作成します。

<?php

//GET送信されたデータを受け取る
$namae = $_GET['namae'];
$comment = $_GET['comment'];

//渡すデータを配列に格納
$array_data = array(message=>'以下のデータが送られてきました', namae=>$namae, comment=>$comment);

//ヘッダーの設定
header('Content-type:application/json; charset=utf8');

//データを出力渡すデータ（配列）をJSON形式にデコードして出力
echo json_encode($array_data);

?>

これら2つのファイルをアップロードし、index.htmlにアクセスすればちゃんと動作するはずです。

動作確認はサンプルを確認してください。

あわせて読んでほしい！

Follow @ysklog_net 　