如何使用关系 ajax 与 laravel 5.8？

Question

In Laravel, for relationship with ajax in the file posts data controller/ProductController.php is as follow, for example:

public function addProduct(Request $request)
{
    $products = new Product;
    $products->title = $request->title;
    $products->brands = $request->brands;
    $products->gender = $request->gender;
    $products->category_id = $request->category;
    $products->subcategory_id = $request->subcategory;
    $products->description = $request->description;
    $products->save();

    return response()->json($products);
}

In Laravel, for relationship with ajax in the file blade.php is as follow, for example:

@foreach ($products as $product)
    <tr id="id_{{$product->id}}">
        <td>{{$loop->iteration}}</td>
        <td>
            <input type="hidden" id="product_id" value="{{$product->id}}">
            {{$product->title}}
        </td>
        <td>{{$product->brands}}</td>
        <td>{{$product->gender}}</td>
        <td>{{$product->category ? $product->category->name : ""}}</td>
        <td>{{$product->subcategory ? $product->subcategory->parent : ""}}</td>
        <td>
            <a href="javascript:void(0)" class="btn btn-info" id="show_btn_product" data-id="{{ $product->id }}">
                <i class="fa fa-eye"></i>
            </a>
            <a href="javascript:void(0)" class="btn btn-danger delete-product" id="delete-product" data-id="{{ $product->id }}">
                <i class="fa fa-trash"></i>
            </a>
        </td>
    </tr>
@endforeach

But in ajax with laravel how do it?

if ($("#productForm").length > 0) {
    $("#productForm").validate({

        submitHandler: function (form) {

            var actionType = $('#btn-save').val("create_product");
            $('#btn-save').html('Sending..');

            $.ajax({
                type: "POST",
                url: "{{route('add_product')}}",
                data: $('#productForm').serialize(),
                dataType: 'json',
                success: function (data) {
                    var products =
                        '<tr id="id_' + data.id + '"><td>' + data.id + '</td><td>' + data.category.name + '</td><td>' + data.subcategory.parent + '</td><td>
                    products += '<td colspan="2"><a href="javascript:void(0)"" class="btn btn-info" id="show_btn_product" data-id="{{ $product->id }}"><i class="fa fa-eye"></i></a>';
                    products += '<a href="javascript:void(0)" id="delete-product" data-id="' + data.id + '" class="btn btn-danger delete-product"><i class="fa fa-trash"></i></a></td></tr>';
                    if (actionType) {
                        $('#table_product').prepend(products);
                    } else {
                        $("#id_" + data.id).replaceWith(products);
                    }

                    $('#productForm').trigger("reset");
                    $('#exampleModal').modal('hide');
                    $('#btn-save').html('Save Changes');

                },
                error: function (data) {
                    console.log('Error:', data);
                    $('#btn-save').html('Save Changes');
                }
            });
        }
    });
}

Will this happen?

'</td><td>'+ data.category.name + '</td><td>'+ data.subcategory.parent + '</td><td>

please helpme

Answer 1

Please try again with:

public function addProduct(Request $request)
{
    $products = new Product;
    $products->title = $request->title;
    $products->brands = $request->brands;
    $products->gender = $request->gender;
    $products->category_id = $request->category;
    $products->subcategory_id = $request->subcategory;
    $products->description = $request->description;
    $products->save();
    $products->load(['category', 'subcategory']);
    return response()->json($products);
}