Question

我正在尝试通过ajax发送一个数组，所以我有以下代码：

这是代码

function fncGetChecksToProcess() {
  var allChecks = [];
  $('input[type=text]').each(function() {
    var key = $(this).attr("id").replace("txt_", "");
    allChecks[key] = [];
  });
  $('input[type=checkbox]').each(function() {
    if (this.checked) {
      var className = $(this).attr('class');
      if (className.includes('box_total_')) {
        var ref = $(this).attr('id').replace("box_total_", "");
        var amountDetails = [];
        var docNs = [];
        $('.' + ref).each(function() {
          amountDetails.push(parseFloat($(this).closest('td').next().html().replace("$", "").replace(",", "")));
          docNs.push($(this).attr('id').replace("box_", ""));
        });
        allChecks[ref].push({
          docN: docNs,
          amountTot: $("#sub_" + ref).text(),
          amountDetails: amountDetails,
          chkNum: $("#txt_" + ref).val()
        });
      } else {
        var docN = $(this).attr('id').replace("box_", "");
        allChecks[className].push({
          docN: docN,
          amountTot: $("#td_" + docN).text(),
          amountDetails: "",
          chkNum: $("#txt_" + className).val()
        });
      }
    }
  });
  return allChecks;
}
$(document).ready(function() {
  $("#btn").click(function() {
    var checks = fncGetChecksToProcess();
    console.log(checks);
    $.ajax({
      cache: false,
      type: 'POST',
      data: {
        allChecks: checks
      },
      url: '/process',
      beforeSend: function() {
        console.log("Processing your checks please wait...");
      },
      success: function(response) {
        console.log(response);
      },
      error: function() {
        console.log("Error");
      }
    });
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</head>

<body>
  <table id="table" class="tablesorter" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
        <th>H4</th>
        <th>H5</th>
        <th></th>
        <th>H6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>11002WR</td>
        <td>201100</td>
        <td>A</td>
        <td class="center"><input class="11002WR" id="box_201100" type="checkbox" /></td>
        <td id="td_201100">$320.00</td>
      </tr>
      <tr>
        <td colspan="3"></td>
        <td>Check. No</td>
        <td><input id="txt_11002WR" type="text"></td>
        <td><input id="box_total_11002WR" class="box_total_201100" type="checkbox" /></td>
        <td id="sub_11002WR">$12.00</td>
    </tbody>
  </table>
  <input id="btn" type="button" value="Test" />
</body>

</html>

请检查两个复选框和输入，然后按下测试。

控制台打印出生成的数组，但Ajax不发送它。

为什么我的ajax调用不发送任何参数？我没有在Chrome控制台中看到它们。

感谢。

Answer 1

由于您的键是字符串而不是数字，因此您应该使用对象，而不是数组。变化

var allChecks = [];

到

var allChecks = {};

当您发送带$.ajax的数组时，它只发送带有数字索引的元素，而不是命名属性。

Answer 2

你需要发送一个数组到ajax，现在你在数组中发送一个数组数组... 如果你像服务器一样发布到服务器，帖子将如下所示：

allchecks[] = x
allchecks[] = y ...

https://plnkr.co/edit/SnZmKgRLODYb8p6kPryn?p=preview

   $.ajax({

          cache: false,
          type: 'POST',
          data: {
            allChecks: checks["11002WR"][0]
          },

这是一个快速的解决方案。但这不是一个好习惯

而不是allchecks = []。尝试用键或id构建对象，而不是像ref那样的字符串作为数组的键

对象如下：

 var allChecks = {};

Ajax不将数据作为参数发送

2 个答案: