FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[jQuery] 配列データを一旦格納し、イベント発生時にAjaxで送信する

この前、「後でブログに書きたい」と書いてたことを今更まとめる。

JavaScriptで配列データを作成し、そのデータをすぐに送信するのではなく、送信ボタンを押したときにAjaxで送信するようなケースを考える。
この場合、作成した配列データをどこかに格納しなければいけない。
配列をグローバル変数にして格納してもいいのだが、jQueryのdataメソッドが便利なのでそれを使用する。

処理の概要は、
1. サーバーへ送信する配列データを作成
2. 作成した配列データを jQueryのdataメソッドでDOM要素に格納
3. 送信ボタン押下時に、jQueryのdataメソッドでDOM要素から配列データを取り出す
4. 取り出した配列データを jQuery.ajax の引数に設定してサーバーへ送信
となる。

まず、サーバーへ送信する配列データを作成し、DOM要素に格納する箇所のソースコード例
  var senddata = {};  // サーバーへ送信するデータ
  for(var i=0;i<10;i++){
    // 送信データとして乱数を作成
    senddata[i] = Math.floor(Math.random()*10) + 1;
  }
  // サーバーへ送信ボタン追加
  var $div = $("#div1");
  var $button = $("<button/>").addClass("sbtn").attr("id","sbtn");
  $button.text("サーバーへ送信");
  $button.data("senddata",senddata);  // 送信ボタンに送信データを格納
  $button.click(ajaxsend);
  $div.append($button);
ここで、サーバーへ送信する配列のデータを、大カッコ [ ] ではなく中カッコ { } で宣言している。
jQueryのdataメソッドでは任意のObjectを格納できるのでどちらでも良いのだが、jQuery.ajaxの引数として連想配列(ハッシュ)を設定する必要があるため、ここでは { } で宣言している。
そのため、厳密には配列ではなく「0からの連番をキー値とする連想配列」となる。

次に、送信ボタン押下時にDOM要素から配列データを取り出し、Ajaxで送信する箇所のソースコード例
var ajaxsend = function(){
  $.ajax({url: "./ajaxtest.php",  // 実行されるURL
    type: "POST",
    data: $("#sbtn").data("senddata")  // 送信データ
  });
};

受信した側では、PHPなら
foreach($_POST as $key => $value)
などで配列データを取り出せばよい。

自分が作成した、一通りの動作を確認できるテストコードは以下のとおり。(拡張子zipでアップロードできなかかったので、リンク先を保存して拡張子をzipに変えてください)
jQueryのdataメソッド+Ajaxテストコード
サーバー側のコードとして ajaxtest.php も作ったが、データ送受信確認用コードなので入力チェックやエラー処理などは無い。

以上。この記事を書くためにテストコードを作成したのだが、あまり意味無かったかなぁ。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。