postしたデータをjson形式で値を取得できないです。
index.htmlに

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入力ページ</title>
</head>
<body>
<form method="post" action="response">
    {% csrf_token %}
    <p>id：</p>
    <input id="id" name="id" type="text" placeholder="id" class="form-control">
    <input type="submit" value="送信する">
</form>

<script type="text/javascript">
    $('form')submit(function(){
      var data = $('form').serializeArray();
      data = parseJson(data);
      console.log(data);
    }
</script>
</body>
</html>

とコードを書いて実行しても
console.log(data);で何も値が取得されません。なぜこの書き方だとinputタグのidの値で入力したデータがjsonでconsole.log(data);で取得できないのでしょうか？

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

回答1件

ベストアンサー

とりあえず、全文書いているのにjQueryのライブラリを読んでませんが大丈夫ですか？
また、submitの前のピリオドが抜けていたりtypeミスがあるようです。
それとsubmitイベントを止めないとページが遷移してしまうのでご注意下さい

javascript
1$(function(){
2  $('form').on('submit',function(e){
3    e.preventDefault();
4    var data = $('form').serializeArray();
5    data = JSON.stringify(data);
6    console.log(data);
7  });
8});

追記

alertする

HTML
1<html>
2<body>
3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
4<script>
5$(function(){
6  $('form').on('submit',function(e){
7    //e.preventDefault();
8    var data = $('form').serializeArray();
9    data = JSON.stringify(data);
10    alert(data);
11  });
12});
13</script>
14<form method="post" action="response">
15<input type="text" name="id" value="hoge">
16<input type="submit" value="送信する">
17</form>
18</body>
19</html>

投稿2017/10/31 06:16

編集2017/10/31 07:31

yambejp

総合スコア114821

退会済みユーザー

2017/10/31 06:30

ありがとうございます。質問文のコードを試したところ、送信するボタンを押しても画面が遷移しなくなってしまいました。どのように直せばよいでしょうか？ちなみに、jQueryのライブラリは読み込ませました。

yambejp

2017/10/31 06:33

e.preventDefault() で、イベントを止めています。挙動が確認できたら該当行をコメントアウトするなり削除するなりしてください

退会済みユーザー

2017/10/31 06:46

console.log(data);　でデータが確認できないのですが。。。var data = $('form').serializeArray(); の後の行にもconsole.log(data);　を書いたのですがそこもデータが確認できませんでした。。。

退会済みユーザー

2017/10/31 06:46

どうすればよいでしょうか？

yambejp

2017/10/31 06:50

> データが確認できないとはどういう状況ですか？submitを止めても確認できませんか？ submitシてしまえば前のページのデータは確認しようがありません。 submitしつつデータを確認したいならたとえばこうします setTimeout(function(){console.log(data)});

退会済みユーザー

2017/10/31 07:09

console.log(data);が送信するボタンを押しても押さなくても表示されないということです。 setTimeout(function(){console.log(data)});を追加してもconsole.log(data);はいつでも見れませんでした。

yambejp

2017/10/31 07:36

とりあえずalertに変更しました追記したタイプのものでコピペして実行してみて下さい「 {% csrf_token %}」のところは詳細が不明なので端折ってあります。

退会済みユーザー

2017/10/31 07:42

ありがとうございます。alertだとちゃんとdataが表示されるのですが、alert(data);の下にconsole.log(data);を書くと何も表示されません。なぜこのようなことになってしまうのか...

yambejp

2017/10/31 07:48

> console.log(data);を書くと何も表示されませんごめんなさい、ちょっと状況が理解できません submitを止めれば確認できるんですよね？ submitすれば次のページに飛んでしまうので前のページの処理はコンソールに残るブラウザと残らないブラウザがありますよ

can110

2017/10/31 07:50 編集

横から失礼します。質問者が使っているブラウザによりますが、chromeであればconsole画面上の歯車アイコン(console settings)→Preserve logにチェック入れるとページ遷移してもログ出力は残ります。参考：[Google Chromeでコンソールのログを遷移しても残す](https://spphire9.wordpress.com/2012/08/28/google-chrome%E3%81%A7%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%AE%E3%83%AD%E3%82%B0%E3%82%92%E9%81%B7%E7%A7%BB%E3%81%97%E3%81%A6%E3%82%82%E6%AE%8B%E3%81%99/)

退会済みユーザー

2017/10/31 07:57

お二方ともありがとうございます。てっきりコードの間違いかと思ったら、can１１０さんのご指摘の通りchromeのsえっていの問題でした。無事問題解決できました。

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