Question

我有一个表格，每行有一个“Approve”和“Reject”下拉列表选项（可以多达10行）。当用户点击提交时，我想获得他们为每行选择的值并进行批量更新。

如何通过ajax发布时在控制器中检索这些值？

<table class="col-md-12 table-bordered">
    <thead>
    <tr>
        <th>ItemCode</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Approve/Reject</th>
    </tr>
    </thead>
    <tbody>
        @foreach ($order as $product)
            <tr>
                <td>{{$product->itemcode}}</td>
                <td>{{$product->description}}</td>
                <td>{{$product->quantity}} {{$product->uom}}</td>
                <td data-title="Approve/Reject">
                    <select name="statusSelect[]" id="statusSelect" class="form-control">
                        <option id="{{$product->id}}" value="Approved">Approve</option>
                        <option id="{{$product->id}}" value="Rejected">Reject</option>
                    </select>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
    <div class="btn btn-primary" onclick="save()"></div>

save.js

function save() {

    let order = [];

    $('select[name="statusSelect[]"]').each(function(){
        let id = this[this.selectedIndex].id;
        let value = this.value;
        order.push({id: id, status: value});
    });

    console.log(order);
    let data = JSON.stringify(order);
    console.log(data);

    $.ajax({
        method: 'put',
        url: '/api/order/'
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function(response){
            //console.log(response);
        },
        error: function(data){
            console.log(data);
        }
    });
}

Answer 1

视图

<input type="hidden" class="idStatus" value="{{$product->itemcode}}" >
<select class="statusSelect" id="statusSelect" class="form-control">
     <option selected="selected">Approve</option>
     <option>Reject</option>
</select>

save.js（有很多方法，这些是最喜欢的那个（也许它不是最漂亮的）

        var postData = [];
        var statusSelect = $('.statusSelect);

        $(".idStatus").each(function(i) {
          postData.push({id: $(this).val(), status: statusSelect.eq(i).val() });
        });


        $.ajax({
            async: true,
            url: xxxxxx,  //specify your laravel POST rout
            headers: {"X-CSRF-TOKEN": token},  // the variable token must be taken from an input in the view that has the token
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(postData),
            success: function(data){
               // do something
            }
        });

和控制器

public function foo(Request $data)
{
    if ($data->ajax()){
        foreach ($data->all() as $row){
            dd(row); // you can dd row to check how is the structure of this array and how to use it
        }
    }
}

Answer 2

工作解决方案

<table class="col-md-12 table-bordered">
    <thead>
    <tr>
        <th>Item</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
        @foreach ($order as $product)
            <tr>
                <td>{{$product->item}}</td>
                <td>{{$product->desc}}</td>
                <td>{{$product->quan}} {{$product->uom}}</td>
                <td">
                    <select name="statusSelect[]" id="statusSelect" class="form-control">
                        <option id="{{$product->id}}" value="Approved">Approve</option>
                        <option id="{{$product->id}}" value="Rejected">Reject</option>
                    </select>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
    <div class="btn btn-primary" onclick="save()"></div>

save.js

function save() {

    let order = [];

    $('select[name="statusSelect[]"]').each(function(){
        let id = this[this.selectedIndex].id;
        let value = this.value;
        order.push({id: id, status: value});
    });

    let data = JSON.stringify(order);

    $.ajax({
        method: 'put',
        url: '/api/order/'
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function(response){
        }
    });
}

Laravel控制器

public function approve(Request $request) {
    foreach ($input as $arr) {
        foreach ($arr as $key => $value) {
            if (array_key_exists($key, $arr) && !empty($value)) {
        //process the data 
}

表中的每一行都有一个下拉列表。如何检索选择值和每行的ID并将其保存到数据库？

2 个答案: