Question

我已经以动态方式创建了许多形式的输入，并且我正在尝试使用javascript将它们作为数组发送到控制器。

最初，它只是一个值，它是我在模型中传递的实体的一部分。然后，由于可能不止一个，我将一个Transient字段添加为实体作为List，并在Java中仅用List创建了另一个类。但是，我仍然不知道如何从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>

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

非常感谢您的帮助

Answer 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");
            }
        });

    });

Answer 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;

如何将值数组从输入发送到控制器

2 个答案: