【JavaScript】formの値を、jsonに変換して、postしたい。そして、action先に遷移したい。

Question

##やりたい事
formの値を、jsonに変換して、postしたい。
そして、action先に遷移したい。

ちなみに、
「出来るだけフロント側で対応してほしい。(他のデータは送らずJSONだけ送ってほしい)」
と言われているため、JSON以外のformデータも全て送ってサーバ側で処理...というのはNGです。

(2016/11/22 追記)
postするのは$.ajax()でなく、$.post()でもOKです。

(2016/11/22 追記)
調べたら、
submit：画面は遷移するが、JSONは送れない？
$.ajax/$.post：画面は遷移しないが、JSONは送れる？
やりたい事は「画面は遷移したい。JSONも送りたい。」なので、どうすれば...???

##やった事

<!----- 前略 ----->
<form action="hoge" method="post">
  <!----- 中略 ----->
</form>
<!----- 後略 ----->

<script>
  $('form').submit(function(){
    // form値をJSONに変換
    var data = $('form').serializeArray();
    
    // jQueryを使ってpost
    $.ajax({
      type: $('form').attr('method'),
      url:  $('form').attr('action'),
      dataType: 'json',
      contentType: 'application/json',
      scriptCharset: 'utf-8',
      data: JSON.stringify(data)
    });
    
    // 本来のsubmitイベントはしない
    return false;
    
    
    // 上記のままだと画面 hoge に遷移しない。
    // hogeに遷移したい。
  });
</script>

##環境
Ruby on Rails

Answer 1

状況がよくわからないのですが
ajaxでpostしたあとpostしたら二重投稿になりませんか？
むしろ同じデータをおくるのであればajaxでおくらずにpostするだけでよいのでは？

仮にajaxでpostしたあとにページの遷移をするだけなら
location.hrefでデータを送らない遷移ではいけないのでしょうか？

追記

とりあえずajaxの部分はこうしてください

<script>
$(function(){
  $('form').on('submit',function(){
    var data = {};
    $(this).find('input[name]').each(function(){
      data[$(this).prop('name')]=$(this).val();
    });
    console.log(JSON.stringify(data));
    $.ajax({
    type: $('form').attr('method'),
    url:  $('form').attr('action'),
    dataType: 'text',
    data: data,
    success:function(d){
      console.log(d);
    },
    });
    return false;
  });
});

</script>
<form method="post" action="xxx.php">
<input type="text" name="aaa" value="123">
<input type="hidden" name="bbb" value="xyz">
<input type="submit" value="go">
</form>

Comments

[hnkyi]

> ajaxでpostしたあとpostしたら二重投稿になりませんか？
本来のsubmitが動かないようにreturn false;としています。

> 同じデータをおくるのであればajaxでおくらずにpostするだけでよいのでは？
フロントからJSONを送りたいので、formを送るだけのpostでは要件を満たせないです。

> 仮にajaxでpostしたあとにページの遷移をするだけなら
> location.hrefでデータを送らない遷移ではいけないのでしょうか？
画面Aからaction"hoge"を実行して、hogeに遷移したいので、単なる遷移ではダメですね...申し訳ないです。

[yambejp]

>本来のsubmitが動かないようにreturn false;としています。

それは見てわかっているのですが、その後飛び先にいくんですよね？
そしたら次の２択しかないでしょ？
(1)二重投稿だってわかっていてpostする
(2)postせずにlocation.hrefでとぶ（ajax送信後）

postしてないけどpostしたような表示にしたいというのは道理に合いません
もちろんajaxでページ取得した結果をhtmlとして表示するということは可能ですが
それは遷移先に移動することではありませんので

[hnkyi]

Ruby on Railsのアクション"hoge"に対してPOSTしたいので、
ただの画面遷移では意味がないです。

また、ajaxで処理するだけだとhogeの画面に遷移しないので、
ajaxを使って処理する"だけ"、というのもNGです。

[yambejp]

ajaxの部分はサンプルをつけておました
私の認識が正しければ命題が矛盾しているためご提示のことは
実現不可能ですが、とりあえずajaxで送ることは可能です

Answer 2

input要素に追加するとか。（他の要素も一緒にPOSTされますが、受け取り側で無視すればよいです）

$( 'form' ).submit( function() {
	// form値をJSONに変換
	var data = JSON.stringify( $( 'form' ).serializeArray() );
	$( 'form' ).html( '<input type="hidden" name="json" value="' + data + '">' );
} ); // 未テスト

---

追記：

じゃあフォームを追加すればよいのでは？

$( 'form' ).submit( function() {
	// form値をJSONに変換
	var data = JSON.stringify( $( 'form' ).serializeArray() );
	var action = $( 'form' ).attr( 'action' );
	$( 'form' ).after( '<form id="jsonpost" action="' + action + '"><input type="hidden" name="json" value="' + data + '"></form>' );
	$( 'form#jsonpost' ).submit();
	return false;
} ); // 未テスト

Comments

[hnkyi]

コメントありがとうございます。
「出来るだけフロント側で対応してほしい。(他のデータは送らずJSONだけ送ってほしい)」
と言われているため、提示いただいた内容だとNGです...申し訳ございません。

[kei344]

To: hanakayui0628さん
そういうことは、質問文に書いておいてください。

[kei344]

マイナスされた方は、どの辺りが問題点なのかをコメントして置いてください。今後に生かしたいので、よろしくお願いします。

[hnkyi]

> そういうことは、質問文に書いておいてください。
申し訳ありません、明記しておきます。

[kei344]

回答文に追記しているのですが、御覧になられましたか？

[hnkyi]

返答遅くなり申し訳ございません！
試してみて、JSONがsubmitで送信されるのは確認したのですが、JSONの形式が期待した結果となりませんでした...

期待値：{"hoge": "111", "huga": "222"}
実績値：{"json": {"hoge": "111", "huga": "222"}} // hiddenフィールドのname属性がJSONに入ってきてしまう。Railsの仕様??

[kei344]

json から取り出すのもだめなのですね。では serializeArray は使えませんね。

同じように全要素をそれぞれhiddenで追加すればいいと思いますよ。

[kei344]

ここで回答するとマイナスが付くようですね。残念です。

[yambejp]

なんか思い込みがあってそれに合わないとマイナス評価してくるみたいですね
別に評価を上げてほしいとは思いませんが、回答するだけ無駄なような気がします

[guest1213]

私はマイナスにしました。

どこが悪いか聞いたり、マイナス評価の理由を邪推する前に、この回答のコードをテストして本当にJSONがPOSTできるか確認してみてはいかがでしょうか。

[kei344]

To: guest1213さん
回答されたものを見て、「Content-Type:application/jsonのデータのPOST」だということにやっと思い至りました。なので、「この回答のコードをテストして本当にJSONがPOSTできるか」は確認のしようが有りません。（formのPOSTを受け取ってそれをJSONにすると思っている状態では確認しています）ひとことコメントして欲しかったです。

Answer 3

サーバー側がContent-Type:application/jsonのデータのPOSTしか受け付けず、かつ結果をContent-Type:text/htmlで返してくる、ということですね。そしてそのHTMLを表示したいと。

この場合、HTMLのformではJSONはPOSTできませんので、実現不可能です。よってAjaxなり、他の方法でJSONをPOSTするしかないのですが、その場合は「画面遷移」が不可能です。

なので私が思いつく案としては受け取ったHTMLで現在のドキュメントの内容を書き換えて「遷移に見せかける」くらいしかありませんが、以下のサンプルのような感じではどうでしょうか。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>a</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <form action="b.html">
  </form>
  <button id="a">submit</button>
  <script>
    var data = {"message": "hello"};
    var action = $("form").attr("action");
    var forwarded = false;
    $("#a").on("click", function() {
      $.ajax({
        type: "POST",
        url: action,
        dataType: "html",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function(res) {
          // レスポンスからDOMを構築してscriptタグだけ復元可能なようにしておく
          newHtml = new DOMParser().parseFromString(res, "text/html");
          var scriptElements = Array.prototype.map.call(
            newHtml.getElementsByTagName("script"), function(elem) {
              return elem;
            }
          );
          var scriptParents = [];
          var scriptNexts = scriptElements.map(function(elem) {
            scriptParents.push(elem.parentNode);
            for(;elem.nextSibling !== null && elem.nextSibling.tagName === "script";
                elem = elem.nextSibling) {}
            return elem.nextSibling;
          });
          var i = 0;
          for(i = 0; i < scriptParents.length; i++) {
            scriptParents[i].removeChild(scriptElements[i]);
          }
          
          // 現在のドキュメントを空(<html>のみ)にする
          while(document.documentElement.firstChild) {
            document.documentElement.removeChild(document.documentElement.firstChild);
          }
          // レスポンスのDOMから現在のドキュメントに要素を移動させる
          while(newHtml.documentElement.firstChild) {
            document.documentElement.appendChild(
              newHtml.documentElement.removeChild(newHtml.documentElement.firstChild));
          }
          // scriptの復元
          var loaded = Promise.resolve();
          for(i = 0; i < scriptParents.length; i++) {
            (function(i) {
              loaded = loaded.then(function() {
                return new Promise(function(resolve) {
                  var script = document.createElement("script");
                  for(var j = 0; j < scriptElements[i].attributes.length; j++) {
                    var attr = scriptElements[i].attributes.item(j);
                    script.setAttribute(attr.name, attr.value);
                    if(attr.name === "src") {
                      // ファイルを読み込んでいる場合は以降のコードは読み込み終わってからでないといけない
                      script.onload = function() { resolve(); };
                    }
                  }
                  scriptParents[i].insertBefore(script, scriptNexts[i]);
                  script.textContent = scriptElements[i].textContent;
                  if(!script.onload) { resolve(); }
                });
              });
            })(i);            
          }
          
          // 「戻る」対応
          if(!forwarded) {
            history.pushState(null, null, action);
          }
          window.onpopstate = function(){
            location.reload();
          };
        },
      });
    });
    // 「進む」対応
    window.onpopstate = function(){
      if(location.pathname.endsWith("/" + action)) {
        forwarded = true;
        $("#a").click();
      }
    };
  </script>
</body>
</html>

ブラウザがHTMLを新たに読み込んだ時のように振舞わせるために、「進む」、「戻る」の制御やスクリプトの実行などいろいろやってますが、これでもたぶんなんか考慮は漏れてます。「HTMLの中身全部」というのがなんとなく危険そうです。あくまでサンプルとして考えてください。

また上記コードは私のオリジナルですが、このような手法はSPA(Single Page Application)などを作成する際の一つの方法として名前がついています。「pjax」というキーワードで調べてみてください。