【ajax】動的に２次元配列を作成してPHPにPOSTする

公開日：2016/08/06

更新日：2016/08/06

カテゴリー: Ajax

ループを使用して動的に２次元配列を作成し、ajaxでPHP側にデータをPOSTする方法を説明しています。

loadメソッドを使ってPOST送信

ループで作成した2次元配列のデータを、loadメソッドを使ってサーバーのPHPファイルにPOST送信します。

$('エレメント').load('ここにファイルパス', {key:value});

第1引数にPOST送信するURLを、第2引数に作成した2次元配列のデータを入れます。

これでajax送信すると、結果データが帰ってきます。

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 array = [];
		//ループで2次元配列を作成
		for(var i=0; i<3; i++){
			//2次元配列の準備
			array[i] = [];
			//ループで2次元配列に要素を代入
			for(var j=0; j<3; j++){
				//2次元配列の作成
				array[i][j] = "1次元「" + i + "」番目の2次元「" + j + "」番目の配列の要素です";
			}
		}
		//JSONにエンコード
		var array_json = JSON.stringify(array);
		//出力
		$('#output').load('get-data.php', {data : array_json});
        }
      //-->
    </script>
  </head>
  <body>
     <p><input type="button" value="サンプルの実行" onclick="action();"></p>
     <div id="output">「サンプルの実行」を押すと、ajaxでPOST送信した2次元配列のデータがここに表示されます。</div>
  </body>
</html>

「サンプル実行」ボタンを押すと、ajaxにPHPファイルに2次元配列のデータをPOSTします。

PHP

「get-data.php」ファイルに、以下を記述します。

<?php
//POST送信されてきたデータ（JSONエンコードされた2次元配列）を受け取る
$data = $_POST['data'];
//受け取ったデータをJSONデコードする
$data2 = json_decode($data);
//ヘッダーの設定
header('Content-type:text/plain; charset=utf8');
//結果を出力
print_r($data2);
?>