js post送信 送る値の設定form抜きで

Question

前提
入力画面で作ったデータをオブジェクトとして持っています。(3つ)
登録ボタンを押したらjsonに変換して値をajaxで送っていたのですが、
仕様上の関係で、ページ移動する仕様になりpost通信を利用する形になりました。
(GETだと容量を超えるので使えません)

やりたいこと
三つのオブジェクトと名前と役柄と日付をまとめて送りたいです。

下のサイトを参考にしても出来ませんでした。
Formを作らずにJSでPOST送信

上記のサイトで私が渡したデータはget通信のような
name=value,name=object,… みたいな形で渡しました。

分かる方がいましたら、ご教授お願いいたします。

jquery

var object1 = {"Id":[],"Val":[]};
var object2 = {"Id2":[],"Val2":[]};
var object3 = {"Id3":[],"Val3":[]};

var name= $('[name=name] option:selected').text();
var chara= $('[name=chara] option:selected').text();
var date = $(".date").datepicker("getDate");
date = $.datepicker.formatDate('yy/mm/dd', date)

//オブジェクトは.pushでテーブルのデータを入れてjson stringfyで変えています。
var test = "name:"+ name + ",chara:" + …以下略

execpost(action,test);

jquery

function execPost(action, data) {
 // フォームの生成
 var form = document.createElement("form");
 form.setAttribute("action", action);
 form.setAttribute("method", "post");
 form.style.display = "none";
 document.body.appendChild(form);
 // パラメタの設定
 if (data !== undefined) {
  for (var paramName in data) {
   var input = document.createElement('input');
   input.setAttribute('type', 'hidden');
   input.setAttribute('name', paramName);
   input.setAttribute('value', data[paramName]);
   form.appendChild(input);
  }
 }
 // submit
 form.submit();
}

Comments

[m.ts10806]

現在作成中のソースをご提示願います。

[退会済みユーザー]

失礼しました。いま、手元にデータがないので確かこのようなコードだったというものを載せておきます。

Answer 1

JqueryのAjaxでPOSTするのはダメですか？

var sendData = {};

sendData.name = "NAME";

$.ajax({
  type: 'POST',
  url: 'url.php',
  cache: false,
  data: sendData,
  beforeSend: function(xhr)
  {
  	//ヘッダーに追加したいものがあれば
    // xhr.setRequestHeader("XXX", XXX );
  },
  success: function(e)
  {
  	//完了処理
  },
  error: function(){
      // 失敗処理
  }
});

//受け取り側はこんな感じです
$name = $_POST['name'];

###内容が適切ではなかったようなので追記です。
Submitting JSON data to 4D using AJAX

$.ajax({
  type: 'POST',
  url: url,
  contentType: 'application/json; charset=utf-8',
  data: {jsonStr: JSON.stringify( jsonObj )},
  dataType: 'json', // The type of data jQuery expects back from the server.
  success: function( data ) {
     // do something
  }
});

参照元

Comments

[退会済みユーザー]

回答ありがとうございます。
私の説明不足でした。
ページ移動するため、ajaxは使えないんじゃないかなと思いました。
また、今回は申し訳ありませんがphpは使っていません。

[IShix]

なるほど。PHPを使わない仕様でしたらそもそもPOSTで受け取れないのでその場でページを生成するのがベストですね。それ以外にはlocalStorageやcookieに一旦書き込んで読む出す方法もありますが、ブラウザの対応状況や上限容量もありますので見合うものか一度調べてみてください。

クッキーの特徴
保存容量が最大4KB
リクエストの度にサーバへ値を送信
任意に有効期限を決められる

LocalStorageの特徴
保存容量はブラウザにより異なる(5MB～10MB)
サーバへ値を送信しない
無期限

こちらの記事より抜粋しました
http://wp.tech-style.info/archives/742

[退会済みユーザー]

ご丁寧にありがとうございます。
しかし、今回の場合は受け取る時はオブジェクトに全部入れる形をとっています。
その時に、4Dというものがありましてjs側で
var test = <!--4dhtml test-->;　とすればサーバ側(4D)で作ったtestという変数の中身を
とってこれるので受け取りは大丈夫です。

なので、データをちゃんと送れれば平気かなと今の状況だと考えております。
もし、間違っているところがありましたらご指摘お願いいたします。

[IShix]

4Dというものがあるということを知りませんでした。
失礼しました。それっぽいものを見つけたのでコード追記しました。

Answer 2

input.setAttribute('value', data[paramName]);

オブジェクトでなければ駄目なようですが……。
スクリプトを流用するならデータ形式も合わせなければいけないのでは？