jsで取得した結果をhtmlに渡したい

jsで取得した結果をhtmlに渡したいです。

<body>
　  <form method="post" action="">
    <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
    {% for i in json_data.items.values %}
            <option value="{{forloop.counter}}">{{ i }}</option>
    {% endfor %}
    </select>

    {% for key, values in preprocessed %}
    <select name="type" id=type{{forloop.counter}}>
    {% for counter, value in values %}
        <option value="{{forloop.counter}}">{{ value }}</option>
    {% endfor %}
    </select>
    {% endfor %}
    </form>

  <script type="text/javascript">

        $(document).ready(function () {
            $('#mainDD').on('change', function() {
              var thisType = "type" + $(this).val();
              for(i=1; i<6; i++) {
                  var thisId = "type" + i;
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });


  </script>

     <form id="postform" action="http://localhost:8000/app/test_view" method="POST">
      {% csrf_token %}
      <input type="submit" value="SEND">
     </form>
     <script type="text/javascript">
            $('[name=type]').change(function() {
            var array1 = [];
            var array2 =[];
                $('[name=main] option:selected').each(function() {
                array1 = $(this).text();
                console.log(array1);
            });

                $('[name=type] option:selected').each(function() {
                array2 = $(this).text();
                console.log(array2);
            });
        });

     </script>
  </body>

とindex.htmlに書きました。
このarray1とarray2で取得した内容をtest.htmlに渡してpタグ内で表示させたいです。

test.htmlには

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選択結果</title>
</head>
<body>

<p>{{ array1 }}</p>
<p>{{ array2 }}</p>

</body>
</html>

と書きました。
views.pyには

from collections import OrderedDict
from django.shortcuts import render
import json
from django.http import JsonResponse

def index(request):
    with open('./data/company_demand.json', 'r') as f:
        json_data = json.loads(f.read(), object_pairs_hook=OrderedDict)

        preprocessed = []
        counter = 0
        for key in ["type1", "type2", "type3", "type4","type5"]:
            values = [(i + counter, value) for i, value in enumerate(json_data[key].values())]
            preprocessed.append((key, values))
            counter = len(json_data[key])
    return render(request, 'index.html', {'json_data': json_data,'preprocessed': preprocessed})



def test_view(request):
    return render(request, 'test.html')

と書きました。この時、test_viewメソッドにどのようにarray1とarray2で取得した内容を渡せば良いでしょうか？

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

回答1件

ベストアンサー

selectで選んだものを渡したいのであれば id="postform" の中に select id="mainDD"　を配置するようにしたら良いのでは。

追記：

ブラウザ上でページ間で情報を持つ方法です。

【Window.localStorage - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

【LocalStorageとは？その使い方を徹底解説！】
http://wp.tech-style.info/archives/742

【localStorageで複数のデータを保存する｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

【LocalStorageをもっとデータベースライクに使う方法 - Qiita】
https://qiita.com/masamitsu-konya/items/ce7f6469434076448238

投稿2017/09/28 02:52

編集2017/09/28 05:27

kei344

総合スコア69400

退会済みユーザー

2017/09/28 03:09

それはどこの部分についてでしょうか？どのような意図なのかコードを提示してもらえませんか？

kei344

2017/09/28 04:58

今のコードではform が二つに分かれている意味がないため、ひとつにまとめればJavaScriptをつかわず実装できますよ、ということです。

退会済みユーザー

2017/09/28 05:05

非同期通信で渡したいです。すみません言葉が足りませんでした

退会済みユーザー

2017/09/28 05:05

その場合どう書けば良いのでしょうか？

kei344

2017/09/28 05:11

非同期通信で値を渡すのであれば、index.htmlからページ移動せずに test.htmlをどうしたいのでしょうか。それともindex.htmlでの変更をサーバサイドスクリプトを経由せずにtest.htmlにページ移動し、その値を使うつもりでしょうか？

退会済みユーザー

2017/09/28 05:17

index.htmlでの変更をサーバサイドスクリプトを経由せずにtest.htmlにページ移動し、その値を使うであっています。その値をtest.htmlに埋め込みたいです

kei344

2017/09/28 05:24

それは非同期通信とは言いませんね。POSTで渡してサーバサイドに任せるのが簡単だとは思いますよ。たとえば、「array1 = $(this).text();」というコードを書かれていますが、「array1」にはただのテキストが入ります。入った時点で配列ではなくなります。（そもそも単一のセレクト要素から値を取得するために配列にする意味もない気がしますが）この状態のコードからは難しいかもしれませんが、あとで方法だけ追記して置きます。

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