使用ajax的多个请求

Question

我有一个可以包含 1 到 5000 个字段的表单，这些字段通过 ajax 发送，我需要每 10 个字段发送一次，因为序列化不支持这么多的请求，我该怎么做？

我使用的是 laravel 5.8

$('#botaosalvar').on('click', function(event) {
  event.preventDefault();
  var serializeDados = $('#formdados').serializeArray();
  console.log(serializeDados);

  $.ajax({
    type: 'POST',
    url: "{{ route('originalMap_edit') }}",
    data: serializeDados,
    dataType: 'json'
  }).done(function(res) {
    console.log(res);
  });
});

Answer 1

如果您决定将数据分块并在多个请求中发送，不建议这样做，请考虑此示例。

$(function() {
  function sendData(url, data) {
    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      dataType: 'json',
      success: function(res) {
        console.log(res);
      }
    });
  }

  function getDataPair(element) {
    if ($(element).is("textarea")) {
      return {
        name: $(element).attr("name"),
        value: $(element).text()
      };
    }
    return {
      name: $(element).attr("name"),
      value: $(element).val()
    };
  }

  function formSubmit(form, chunk) {
    var elements = $("input, textarea, select", form);
    if (chunk == undefined) {
      chunk = 10;
    }
    var myData = [];
    elements.each(function(index, el) {
      if (myData.length == chunk) {
        sendData("{{ route('originalMap_edit') }}", myData);
        myData = [];
      }
      myData.push(getDataPair(el));
      console.log(index, myData);
    });
  }

  $('#botaosalvar').on('click', function(event) {
    event.preventDefault();
    formSubmit($('#formdados'), 10);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formdados">
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="2" cols="40">4</textarea>
  </div>
  <div>
    <select name="e">
      <option value="5" selected="selected">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
    </select>
  </div>
  <div>
    <input type="checkbox" name="f" value="8" id="f"> <label for="f">8</label>
  </div>
  <div><input type="text" name="g" value="9" id="g"></div>
  <div><input type="text" name="h" value="10" id="h"></div>
  <div><input type="hidden" name="i" value="11" id="i"></div>
  <div>
    <textarea name="j" rows="2" cols="40">12</textarea>
  </div>
  <div>
    <select name="k">
      <option value="13" selected="selected">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
    </select>
  </div>
  <div>
    <input type="checkbox" name="l" value="16" id="l"> <label for="l">16</label>
  </div>
  <div>
    <button type="submit" id="botaosalvar">Submit</button>
  </div>
</form>

如前所述，这有很多陷阱。如果您有 5000 个字段，这将花费大量时间迭代所有项目，并且会背靠背向您的服务器发送大约 500 个 POST。

1. 您的 POST 处理程序必须将所有数据重新组合在一起
2. 如果其中任何一个失败，则可能缺少数据
3. 如果脚本停止或未完成，您将获得孤立或丢失数据
4. 并发连接数可能超出您的 Web 服务器的处理能力，它可能会 QUEUE 或 DROP 请求（类似于 DOS 攻击）

建议不要分离数据。它可能看起来像这样：

$(function() {
  function sendData(url, data) {
    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      dataType: 'json',
      success: function(res) {
        console.log(res);
      }
    });
  }

  function getDataPair(element) {
    if ($(element).is("textarea")) {
      return {
        name: $(element).attr("name"),
        value: $(element).text()
      };
    }
    return {
      name: $(element).attr("name"),
      value: $(element).val()
    };
  }

  function formSubmit(form) {
    var elements = $("input, textarea, select", form);
    var myData = [];
    elements.each(function(index, el) {
      myData.push(getDataPair(el));
    });
    sendData("{{ route('originalMap_edit') }}", myData);
  }

  $('#botaosalvar').on('click', function(event) {
    event.preventDefault();
    formSubmit($('#formdados'));
  });
});

Answer 2

正如评论者所暗示的，您采用的方法（执行数百个 Ajax 请求）并不是一个好的设计。它会很脆弱（想象一下 100 个请求中有 20 个成功，而另外 80 个失败......尝试从中进行数据恢复！）。

相反，将表单中的所有数据序列化为单个 JSON 对象，然后一次性发布该对象。确保您已启用 GZIP 压缩以最小化线路上的字节数。