javascript - PHP 中的 HTML 数组字段解析

Question

我有一个这样的表单设置:

<form action="/clients/{{ $client->id }}/create-invoice" method="post">
    <div class="form-group">
        <label for="due_date" class="sr-only">Due Date</label>
        <input type="date" name="due_date" class="form-control" placeholder="Due Date">
    </div>
    <hr />
    <p class="clearfix">
        <strong class="pull-left">Invoice Items</strong>
        <a id="add_invoice_item" class="pull-right"><span class="fa fa-plus"></span></a>
    </p>
    <div class="form-group invoice_item">
        <div class="row">
            <div class="col-ms-6 col-sm-8">
                <input type="text" name="item_description[]" class="form-control" placeholder="Description">
            </div>
            <div class="col-ms-3 col-sm-2">
                <input type="number" class="form-control" name="item_quantity[]" placeholder="Quantity">
            </div>
            <div class="col-ms-3 col-sm-2">
                <input type="text" class="form-control" name="item_price[]" placeholder="Price">
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="hidden" name="_token" value={{ csrf_token() }}>
        <button class="btn-primary btn btn-block">Create Invoice</button>
    </div>
</form>

我使用的是 Laravel 5.2。

我有以下 jQuery 来允许用户添加更多发票项目:

$("#add_invoice_item").click(function(){
    $(".invoice_item").first().clone().insertAfter("div.invoice_item:last").find("input[type='text']").val("");
});

问题是当我查看请求时:

public function store(Request $request, Client $client)
{
    return $request->all();
}

它返回:

{
  "due_date": "2016-11-19",
  "item_description": [
    "Website Development",
    "SEO",
    "Server Setup"
  ],
  "item_quantity": [
    "1",
    "1",
    "1"
  ],
  "item_price": [
    "450.00",
    "300.00",
    "100.00"
  ],
  "_token": "7tUMdXX9FBU4a7cug51oBlrRyeBi9H8ucUNltQgM"
}

虽然这是预期的结果，但我不确定如何让它以易于使用的方式返回。

例如，我需要的不是 3 个不同的数组列表，而是需要一个数组列表，其中每个对象以及该行对象的每个字段。

所以:

它将返回这个:

{
  "due_date": "2016-11-19",
  "items": [
    {"description": "Server Setup", "price": "100.00", "quantity": "1"},
    {"description": "SEO", "price": "300.00", "quantity": "1"},
    {"description": "Website Development", "price": "450.00", "quantity": "1"}
  ],
  "_token": "7tUMdXX9FBU4a7cug51oBlrRyeBi9H8ucUNltQgM"
}

我假设我需要更改 HTML 和 jQuery，但我不确定如何让它工作，以便 jQuery 正确添加新字段并添加到 items 数组中

谢谢!

Answer 1

将数组的命名更改为product[i][field]

<input type="text" name="product[0][description]"/>
<input type="text" name="product[0][quantity]"/>
<input type="text" name="product[0][price]"/>

<input type="text" name="product[1][description]"/>
<input type="text" name="product[1][quantity]"/>
<input type="text" name="product[1][price]"/>

在 PHP 中，您将收到以下内容:

var_dump($_POST['product']);

[
    [
        'description': 'Website development',
        'quantity': '1',
        'price': '450.00'
    ],
    [
        'description': 'SEO',
        'quantity': '1',
        'price': '300.00'
    ],
]

唯一的缺点是你需要手动设置数组索引。

<小时/>

使用 jQuery 和模板:

var index = 0;

function add() {
  $('.form').append(template('#my-template', {
    i: index
  }));
  index++;
}

function template(selector, params) {
  if (typeof params === 'undefined') {
    params = [];
  }

  var tplEl = $(selector);

  if (tplEl.length) {
    var tpl = $(selector).html();

    $.each(params, function(i, n) {
      tpl = tpl.replace(new RegExp("\\{" + i + "\\}", "g"), function() {
        if (typeof n === 'object') {
          return n.get(0).outerHTML;
        } else {
          return n;
        }
      });
    });

    return $(tpl);
  } else {
    console.error('Template "' + selector + '" not found!');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="add()">Add more</button>
<hr/>
<div class="form">

</div>
<script type="text/jQuery-tpl" id="my-template">
  <div class="row">
    {i}: 
    <input type="text" name="product[{i}][description]" />
    <input type="text" name="product[{i}][quantity]" />
    <input type="text" name="product[{i}][price]" />
  </div>
</script>