jQueryでname属性配列の繰り返し処理を行ったのでメモメモ

■やりたいこと テーブルのセルデータを取得して処理を行う 処理結果は結果のセルに設定する。

テーブルは↓のようなかんじ

NO データ1 データ2 結果
1 100 2
2 100 4
3 100 5

データ1とデータ2の加算結果を結果に設定する。

ソースはこんな感じ
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// no配列の分繰り返す。
$("[name=’no[]’]").each(function() {
// $(this).text() で no 配列の処理中の値が取得できる
// data1 配列の no -1 番目の値を取得する
var data1 = $("[name=’data1[]’]").eq($(this).text()-1).text();
var data2 = $("[name=’data2[]’]").eq($(this).text()-1).text();

// 結果を設定するセルオブジェクトを取得
var result = $("[name=’result[]’]").eq($(this).text()-1);
// 結果の設定
result.text(parseInt(data1) + parseInt(data2));
});
});
</script>
<style>
table td {
border: 1px solid #000;
width: 80px;
}}
</style>
</head>
<body>
<table>
<tr><th>NO</th>
<th>データ1</th>
<th>データ2</th>
<th>結果</th></tr>
<tr><td name="no[]">1</td>
<td name="data1[]">100</td>
<td name="data2[]">2</td>
<td name="result[]"></td></tr>
<tr><td name="no[]">2</td>
<td name="data1[]">100</td>
<td name="data2[]">4</td>
<td name="result[]"></td></tr>
<tr><td name="no[]">3</td>
<td name="data1[]">100</td>
<td name="data2[]">5</td>
<td name="result[]"></td></tr>
</table>
</body>
</html>
[/html]

配列を使用する際の $(“[name=’no[]’]”) の書き方がポイントかも

同一ドメイン内のAjax通信は問題なくできたのだが、
別ドメインへのAjax通信はクロスドメインの制限にひっかかりできなかった。

なんとかできないものかとあちこちのサイトを見たり
テストをしたりしてようやく出来るようになったのでメモしておく

■やりたいこと
クライアントから別ドメインのサーバへPOST
サーバ側で処理を行い、処理結果を返す
クライアントでは処理結果を受け取って表示する。

サンプルは2つのフォームの値を足して結果を返すだけの簡単なもの

■サーバ側PHP
[php]
<?php
// クライアントからのPOSTを受け取る
$val = $_POST[‘val’];
$val2 = $_POST[‘val2’];

// 何らかの処理(サンプルなので加算するだけ)
$result = $val + $val2;

// 下記をレスポンスヘッダーに含める
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");

// 処理結果($result)などクライアントに返す値を連想配列で設定し、json_encodeを通す。
print json_encode(array(‘result’ => $result));
?>
[/php]

■クライアント側
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#send").click(function(){
// 送信先、送信方法、送信データを設定する。
$.ajax({
url: "サーバPHPのURL",
type: "post",
data: {
‘val’ : $("#val").val(),
‘val2’ : $("#val2").val()
},

success: function(data) {
$("#result").html("成功 : ");
          // 成功した場合、結果を取得して parseJSON でパーズする。
$("#result").append($.parseJSON(data).result);
},

error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#result").html("エラー : " + textStatus);
}
});
});
});
</script>
</head>
<body>
<form method="post">
<input id="val" />
<input id="val2" />
<input id="send" type="button" value="処理" />
</form>
<div id="result"></div>
</body>
</html>
[/html]

文字コードはUTF-8で作成しています。

以上。

3Rise Creativeは当初、3人のメンバーの有志団体でした。

目標は会社設立。

WEB大好き!制作大好き!な3人が寄り集まってお仕事をさせていただいておりましたが、

ようやく、目標達成。会社が設立されました。

日付は 6月4日。

代表と取締役が、一年前「会社を一年後に立ち上げる!」と決めた日付です。

 

たくさんの人の支えがあって、たくさんの思い入れがあって、設立されたこの会社。

どうぞ末永くご愛顧くださいますよう。。

これからも、どうぞよろしくお願いいたします。