如何将一组值从输入发送到控制器答案

【问题标题】：How can I send an array of values from the inputs to the controller如何将一组值从输入发送到控制器
【发布时间】：2019-05-01 12:17:01
【问题描述】：

我在一个表单中有许多动态创建的输入，我正在尝试使用 javascript 将它们作为数组发送到控制器。

最初它只有一个值，它是我在模型中传递的实体的一部分。然后，因为它可能不止一个，所以我将一个瞬态字段作为一个列表添加到实体中，并在 java 中创建了另一个只有一个列表的类。但是，我仍然不知道如何将这些值从 javascript 添加到表单中的 th:object 中。

<form id="selectform" th:object="${systemIdListForm}" th:action="@{/myController}" method="get">
    <div class="box-body">
        <label>System Id:</label>
        <div id="fields">
            <div class="form-group col-md-1">
                <input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
            </div>
        </div>
        <a id="addMore" href="#"><i class="fa  fa-plus"></i><span>Add</span></a>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">Select</button>
    </div>
</form>



<script  type="text/javascript">
/*<![CDATA[*/
 $(document).ready(function () {
     $("#addMore").click(function() {
     var html = '<div class="form-group col-md-1"><input class="form-control" name="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/></div>';
     $('#fields').append(html);
     });

     $("#selectform").submit(function(){
         var values = $(this).serialize();
     });
 });
/*]]>*/
</script>

目前我可以看到变量值具有正确的信息，但没有发送到控制器。我意识到这些值的格式可能不是我需要的，但我不确定该怎么做。

非常感谢任何帮助

【问题讨论】：

标签： javascript java spring-mvc thymeleaf

【解决方案1】：

您在 Model 中使用了什么数据类型？确保您已为该字段使用 String []。如果没有使用 String [] 则使用它并让我知道它是否有效。

您也可以参考以下代码。它仅适用于您的情况。

$("#selectform").submit(function (event) {

        // form redirect stop
        event.preventDefault();
        var status = jbf.form.validate('#selectform');
        if (!status) {
            return;
        }


        // get form data
        var data = {};
        data["enrollmentNumber"] = $("#enrollmentNumber").val();
        data["systemIdInput"] = jQuery("#selectform input[name=systemIdInput]").val();

        var url = "/yourURL";

        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                var message = response.message;
                //success notification
                if(response.success === true){
                    alert(message);

                }else{
                    error(message);
                }

            },
            error: function (e) {
                console.log("ERROR: ", e);
                error("Add failed");
            }
        });

    });

【讨论】：

感谢您的回答，我想到了 ajax，但在这种情况下我试图避免它。我找到了一种在控制器中获取输入值列表的方法。

【解决方案2】：

我设法使用隐藏输入从表单中的所有输入中获取值列表。我在我的实体（systemIds）中添加了一个瞬态字段，我已经获得了所有值。

 <form id="selectform" th:object="${myEntiry}" th:action="@{/crops/singlecroplabeloffinsp/list/1}" method="get">

    <input class="form-control" id="systemIdList" th:field="*{systemIds}"  type="hidden"/>

    <div class="box-body">
        <label>System Id:</label>
        <div id="fields">
            <div class="form-group col-md-1">
                <input class="form-control" name ="systemIdInput" type="text" style="width: 90%;" maxlength="8" onkeypress="return isNumber(event)"/>
            </div>
        </div>
        <a id="addMore" href="#"><i class="fa  fa-plus"></i><span>Add</span></a>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">Select</button>
    </div>
 </form>

 ...

  $("#selectform").submit(function(){

      //get all the system ids
      var x = document.getElementsByName("systemIdInput");
      var systemIds = [];

      for (i = 0; i < x.length; i++ ) {
          if (x[i].type ='text') {
              systemIds.push(x[i].value);
          }
      }

      $("#systemIdList").val(systemIds);
      this.submit();
  });

使用 getter & setter 添加到实体中：

@Transient
private List<Integer> systemIds;

【讨论】：