Ajax 向后端发送数据数组

Question

我有一个表格，我在其中循环动态数据，每个动态项目都有输入字段，然后我将这些输入字段与动态项目 ID 一起发送到后端。

问题

问题是我在 ajax 中的字段给了我奇怪的数据作为数组。

代码

 $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('.newservicesSave').on('click', function(e) { e.preventDefault(); e.stopPropagation(); var idmess = $(this).data("id"); // this array data are wrong var newservices = []; $(".newservices").each(function() { newservices.push($(this).val()); }); console.log('newservices: ', newservices); $.ajax({ url: '{{ url(' panel / addnewservices ') }}/' + encodeURI(idmess), type: 'POST', dataType: "JSON", data: { "id": idmess, "newservices": newservices, "_method": 'POST', "_token": "{{ csrf_token() }}", }, success: function(data) { $('#servicesTable').empty(); $.each(data.data, function(key, value) { $("#servicesTable").append('<tr><td>' + value['name'] + '</td><td><textarea name="' + services['key']['description'] + '" class="form-control" name="description"></textarea><input type="hidden" name="' + services['key']['service_id'] + '"/></td><td><input type="text" class="form-control" placeholder="Harga" name="' + services['key']['price'] + '"/></td><td><input class="form-checkbox" type="checkbox" name="' + services['key']['active'] + '" /></td></tr>'); }); } }); }); });

 <table class="table table-bordered table-striped table-hover"> <thead> <tr> <th>Service</th> <th>Description</th> <th>Harga</th> <th>Active</th> </tr> </thead> <tbody> @foreach($services as $index => $service) <tr> <td>{{$service->name}}</td> <td> <textarea name="newservices[{{$index}}][description]" class="newservices form-control" name="description"></textarea> <input type="hidden" class="newservices" name="newservices[{{$index}}][service_id]" /> </td> <td> <input type="text" class="newservices form-control" placeholder="Harga" name="newservices[{{$index}}][price]" /> </td> <td><input class="newservices form-checkbox" type="checkbox" name="newservices[{{$index}}][active]" /></td> </tr> @endforeach </tbody> </table> <button type="button" data-id="{{$laundry->id}}" class="newservicesSave btn btn-primary">Save changes</button>

结果

来自 ajax 的预期数据

数据应按以下结构进入后端

newservices [
    0 [
        active => 0,
        service_id => '123456',
        description => 'abc',
        price => '1000'
    ],
    1 [...],
    2 [...],
    // etc.
]

任何想法？

Answer 1

要获得所需的结构，您需要遍历行并为每一行创建一个 object

尝试类似：

var newservices = $('#myTable tbody tr').map(function(){
    var $row = $(this);
    return {
        description: $row.find('.newservices[name*="description"]').val(),
        service_id : $row.find('.newservices[name*="service_id"]').val(),
        // ... same for other properties
    }    
}).get();