大量のinputのデータをAjaxでデータベースに反映させる方法

50個のinputに入力されたデータをデータベースに反映したいと考えています。
入力後に直ちに反映したいため、Ajaxを用いています。
inputのidとデータベースのフィールド名は同じです。

とりあえず、単純な方法しか分からないので、やむを得ず、下記の方法をとっています。

まず、Ajaxのvar data ={}の中に、

lang
1var data={
2"a":$("input#a").val(),
3"b":$("input#b").val(),
4・・・
5}

という感じで、50個も書いています。
そして、ajaxでデータを飛ばす先のPHP（データベースに反映させる処理を行う）においても、

lang
1$a = sanitizeString($_POST['a']) ;
2$b = sanitizeString($_POST['b']) ;
3・・・

のように、50個を変数に入れています。
さらに、私はpearを用いているので、
$st = $db->prepare("INSERT INTO table名 (a,b,・・・) VALUES(?,?,・・・));
$result = $db->execute($st,array($a,$b,・・・);
として、それぞれ50個ずつを記述して処理しています。
50個でも結構大変でしたが、一般的にはもっとスマートに処理する方法があるのではないかと思い、それをご存じの方は、教えていただけないでしょうか。

私が思いついてやってみようと考えたのは、下記の方法です。

Ajaxでデータを飛ばしたいinputに、.ajaxというクラス名を付ける。
↓
下記のように、各inputのidと入力されたデータを取り出し、変数dataを作る。

lang
1data = "";
2	$("input.ajax").each(function(){
3		point = '"'+$(this).attr("id")+'"' + ':' + $(this).val() + ',' ;
4		data = data + point ;	
5	})
6	var data = '{' + data.slice(0, -1) + '}' ;

↓
Ajaxでデータが飛んできたPHPにおいては、データベースからフィールド名を取得する。
$prepared、$execute、$valuesの変数に、データを入れておく。

lang
1$pdoStatement = $pdo->query("SELECT * FROM テーブル名 LIMIT 0");
2$columns = array();
3$prepared = "" ;
4$execute = "" ;
5for ($i = 1; $i < $pdoStatement->columnCount()-1; $i++) {
6    $meta = $pdoStatement->getColumnMeta($i);
7	$point = $meta['name'] ;
8	$prepared = $prepared.$point."," ;
9	$execute = $execute.sanitizeString(htmlspecialchars($_POST['".$point."'])).",";
10}
11echo $prepared; 
12$prepared = substr($prepared,0,-1);	//最後のカンマを削除。
13$execute = substr($execute,0,-1); //最後のカンマを削除。
14
15$values = "";
16for ($i = 1; $i < $pdoStatement -> columnCount()-1; $i++){
17	$point = "?";
18	$values = $values.$point.',' ;
19};
20$values = substr($values,0,-1);	//最後のカンマを削除。
21*/

↓
上記で作った$prepared、$execute、$valuesの変数を用いてデータベースへの反映処理をする。

lang
1$st = $db->prepare('INSERT テーブル名 (".$prepared.") VALUES(".$value.") ');
2$result = $db -> execute($st,array($execute));

以上のように、試行錯誤しながらやってみましたが、結局どこがうまくいっていないのかも分からず、とりあえずシンプルに手間のかかる方法（50個について全て手で記述する方法）で対応しています。

一般的に、このような時はこうやって処理するというのが分かれば大変ありがたいです。
長文で申し訳ございません。
よろしくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

ざっくりですが参考になれば。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
6<title>test</title>
7<script>
8$(document).ready(function(){
9	$("#btn_send").click(function(){
10		var senddata = new Object();
11		$("input").each(function(){
12			senddata[$(this).attr("id")] = $(this).val();
13		});
14		$.ajax({
15			type:"POST",
16			url:"test.php",
17			dataType:"text",
18			data:senddata,
19			success:function(msg){
20				alert(msg);
21			}
22		});
23	});
24});
25</script>
26</head>
27
28<body>
29<form>
30<input type="text" id="a" value="aaa"><br>
31<input type="text" id="b" value="bbb"><br>
32<input type="text" id="c" value="ccc"><br>
33<input type="text" id="d" value="ddd"><br>
34<input type="text" id="e" value="eee"><br>
35<input type="text" id="f" value="fff"><br>
36<button type="button" id="btn_send">SEND</button>
37</form>
38</body>
39</html>

lang
1<?php
2foreach($_POST as $key => $value){
3	//ここでINSERT処理をする とりあえずechoしてみる
4	echo $key.' => '.$value.'  ';
5}

投稿2015/01/31 22:03

tsunet111

総合スコア59

退会済みユーザー

2015/02/01 03:36

ありがとうございました。シンプルに解決する方法が見つかり、助かりましたm(__)m

行動規範の内容に同意します

phpは、特定の書式でPOSTを飛ばすと、配列として解釈してくれます。
例えば、

lang
1<form action="" method="post">
2  <input name="params[]" value="a">
3  <input name="params[]" value="b">
4  <input name="params[]" value="c">
5</form>

というものであれば、

lang
1<?php
2var_dump($_POST[params]);
3// array('a', 'b', 'c');

と言った感じです。

クライアントサイドでは、これを利用して、

lang
1var param = $(".form").serializeArray();
2$.ajax({
3    type:"POST",
4    url:"test.php",
5    dataType:"text",
6    data:params,
7    success:function(msg){
8    alert(msg);
9  }
10});

という実装をするのがよいとおもいます。

サーバサイドですが、htmlspecialcharsについては、基本的にhtmlのレンダリング処理のときに行うようにしたほうがよいと思います。

投稿2015/02/03 14:42

musou1500

総合スコア68

PHP側は詳しくないのでわからないですが、JavaScript側には問題がありそうですね。

lang
1var data={
2  "a":○○○
3};

という構文は「data」という変数の「a」という領域に「○○○」という値を入れて初期化するという意味です。
一方で

lang
1var data = '{"a":○○○}' ;

というのは単なる文字列です。
Object型をtoStringしたようなイメージですかね。

eval関数で文字列をコードとして実行するといった裏技を使えばうまくいったりするかもしれませんが、
こんな感じに書いてみるのがシンプルでよいのではないでしょうか。

lang
1// 空のオブジェクトを作る
2// new Object();でもOK
3var data = {}; 
4
5// idをプロパティ名として値を設定
6$("input.ajax").each(function(){
7    data[$(this).attr("id")] = $(this).val();    
8});