javascript - 通过来自动态输入的 ajax 请求发送数据

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() 方法来获取要发送的序列化数据。

确保在输入字段上有一个 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 },