非同期通信でformタグの中にactionを指定すべきでしょうか？

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


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

  <script type="text/javascript">

        $(document).ready(function () {

            $('#mainDD').on('change', function() {
           　 console.log(11111111);
              console.log($(this).val());
              console.log(22222222);
              console.log($('#mainDD :selected').text()) ;

              var thisType = "type" + $(this).val();
              console.log(33333333);
              console.log(thisType);

              for(i=1; i<5; i++) {
                  var thisId = "type" + i;
                  console.log(444444444);
                  console.log(thisId);
                   console.log(555555555);
                  console.log(thisType);
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });

        $('[name=type]').change(function() {
            var array = [];
            $('[name=alphabet] option:selected').each(function() {
                array.push($(this).text());
            });
            console.log(array);
        });


  </script>

     <form id="postform" action="http://localhost:8000/app/" method="POST">
      <input type="submit" value="送信">
     </form>
     <script type="text/javascript">
            $('[name=type]').change(function() {
            var array = [];
            $('[name=alphabet] option:selected').each(function() {
                array.push($(this).text());
            });
            console.log(array);
        });

     </script>

とindex.htmlに書きました。
この arrayで取得した内容を送信ボタンが押された時に非同期通信で送信したいです。
今、actionで"http://localhost:8000/app/"（このhtmlが呼ばれるurl）とurlを指定していますがformタグの中にactionを指定すべきなのでしょうか？

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

回答1件

ベストアンサー

actionの指定がないリクエストデータは自分自身を参照するので
そういった作りになっているならとくにactionの指定はいりません
nameがtypeだったりalphabetだったりする例示になっていないので
もしかしてなにか特殊なケースを想定しているのでしたらなんとも言えませんが

sample

sample追記します

javascript
1$(function(){
2  $('[name=type]').on('change',function(){
3    var f=$(this).closest('form');
4    var url=f.attr('action');
5    var type=f.attr('method');
6    var data=new FormData(f.get(0));
7    $.ajax({
8      "url":url,
9      "type":type,
10      "data":data,
11      "processData": false,
12      "contentType": false,
13    }).done(function(data){
14      console.log(data);
15    });
16  }).trigger("change");
17});

HTML
1<form method="post" action="hoge.php">
2<select name="type">
3<option value="1">data1</option>
4<option value="2">data2</option>
5<option value="3">data3</option>
6<option value="4">data4</option>
7<option value="5">data5</option>
8</select>
9</form>
10

submitをうばう

submitの制御を奪う方法です

javascript
1$(function(){
2  $('form#postform').on('submit',function(e){
3    e.preventDefault();
4    var f=$(this);
5    var url=f.attr('action');
6    var type=f.attr('method');
7    var data=new FormData(f.get(0));
8    $.ajax({
9      "url":url,
10      "type":type,
11      "data":data,
12      "processData": false,
13      "contentType": false,
14    }).done(function(data){
15      console.log(data);
16    });
17  });
18});
19

HTML
1<form id="postform" method="post" action="hoge.php">
2<select name="type">
3<option value="1">data1</option>
4<option value="2">data2</option>
5<option value="3">data3</option>
6<option value="4">data4</option>
7<option value="5">data5</option>
8</select>
9<input type="submit" value="go">
10</form>