Question

我必须通过ajax请求发送来自已经存在的输入的所有数据，以及来自将动态创建的输入的数据，我该怎么做？我需要将数据存储在一个对象数组中，但我不知道如何执行此操作以及将数组放置在哪里，因为我不知道这是否是解决此问题的更好方法。谁能帮我？谢谢

$().ready(function() {
  var arrayOfData = new Array();
  var obj1 = {
    id: "1",
    nominativo: "Carlo",
    cellulare: "345665738",
  };
  var obj2 = {
    id: "1",
    nominativo: "Andrea",
    cellulare: "345348934",
  };
  arrayOfData.push(obj1);
  arrayOfData.push(obj2);

  visualizzaModifica(arrayOfData, $("#divTeamLeaderProduzione"));

  function visualizzaModifica(array, div) {
    div.html("");

    let i = 1;

    array.forEach(function(e) {
      div.append(
        "<div id='div" +
          i +
          "' class='input-group'>" +
          "<input type='text' id='inputModificaNome" +
          i +
          "' class='form-control'  value='" +
          e.nominativo +
          "'>" +
          "<input type='text' id='inputModificaCellulare" +
          i +
          "' class='form-control' value='" +
          e.cellulare +
          "'>" +
          "</div>",
      );

      i++;
    });

    aggiungiInput(i, div);
  }

  function aggiungiInput(i, div) {
    if ($("#div" + i).length == 0) {
      var next = $("<div>", {
        id: "div" + i,
        class: "input-group",
      });

      var inputNome = $("<input>", {
        id: "inputModificaNome" + i,
        type: "text",
        class: "form-control",
      });

      var inputCellulare = $("<input>", {
        id: "inputModificaCellulare" + i,
        type: "text",
        class: "form-control",
      });

      next.on("change", function() {
        aggiungiInput(i + 1, div);
      });

      next.append(inputNome);
      next.append(inputCellulare);
      div.append(next);
    }

    $("#btnSalvaTeamLeaderProduzione").remove();
    $("#br").remove();
    div.append(
      "<br id='br'><input type='button' class='btn btn-dark' value='Salva' id='btnSalvaTeamLeaderProduzione'/>",
    );
  }

  $("#divTeamLeaderProduzione").on(
    "click",
    "#btnSalvaTeamLeaderProduzione",
    function() {
      $.ajax({
        url: "/updateTeamLeaderProduzione",
        type: "post",
        data: {
          /*HERE I NEED TO SEND ALL DATA FROM THE INPUTS ABOVE, ALSO THE DYNAMIC INPUT
        THAT WILL BE CREATED*/
        },

        success: function() {
          alert("Ok");
        },

        error: function(msg) {
          alert(JSON.stringify(msg));
        },
      });
    },
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divTeamLeaderProduzione">


</div>

Answer 1

包装表单标签内的所有输入并使用表单serialize（）方法发送数据。

$.ajax({
  url: "/updateTeamLeaderProduzione",
  type: "post",
  data:$("form").serialize(),

  success: function() {
    alert("Ok")
  },

  error: function(msg) {
    alert(JSON.stringify(msg));
  }

});
  });

Answer 2

我建议您使用form，然后可以在其上使用.serialize()方法来获取要发送的序列化数据。

确保在输入字段上具有name属性。

您可以包装所有内部元素，例如：

  $("#divTeamLeaderProduzione").children().wrapAll('<form></form>')

  data: {
    formData: $("#divTeamLeaderProduzione form").serialize()
  },

另一种选择是创建要发送的对象：

var dataForAjax = {};

$("#divTeamLeaderProduzione")
              .find(':input')          // get all the input elements
              .not('[type="button"]')  // filter out the button element
              .each(function(){        // Iterate over each input found
    dataForAjax[this.id] = this.value;
});

然后：

  data: { formData : dataForAjax },

通过来自动态输入的Ajax请求发送数据

2 个答案: