在laravel中成功调用ajax后如何将行添加到数据表中？

Question

如何在 laravel 中的 ajax 成功响应后将行添加到表中？我试图 add.row() 并且出现错误。谁能帮帮我？

这是我的控制器代码

 public function store(Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required',
    ]);
    if ($validator->passes()) {
        $category = FoodItemCategory::create([
            'name' => $request->name,
        ]);
        $data            = array();
        $data['success'] = 'category has been added';
        $data['id']      = $category->id;
        $data['name']    = $category->name;

        return response()->json(['status' => true, 'data' => $data]);
    }
    return response()->json(['errors' => $validator->errors()]);
}

这是我的 ajax 调用

 $.ajax({
    url: "{{ url('admin/category/add/') }}",
    method: "POST",
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData: false,
    dataType: "json",
    success: function(response) {
        if (response.status == true) {
            what to do here??
        }

 });

这是刀片视图中的表格：-

<table class="table table-bordered text-center" id="categoryTable">
     <thead>
         <tr>
            <th scope="col">Sl No</th>
            <th scope="col">Category Name</th>
            <th scope="col">Action</th>
         </tr>
     </thead>
     <tbody>
          @foreach ($categories as $key => $category)
                  <tr class="remove{{ $category->id }}">
                      <td>{{ $key + 1 }}</td>
                      <td class="data{{ $category->id }}">{{ $category->name }}</td>
                      <td class="actionBtn">
                          <button type='button' class='ms-btn-icon btn-dark mr-3'
                                                onclick='editCategory({{ $category->id }})'> <i
                                                    class='flaticon-pencil'></i></button>
                                            <button type='button' class='ms-btn-icon btn-danger'
                                                onclick='deleteData({{ $category->id }})'> <i
                                                    class='flaticon-trash'></i></button>
                      </td>
                   </tr>
            @endforeach
     </tbody>
</table>

数据插入成功后如何添加新行？ 另外，我想知道如何在 ajax 调用中显示错误消息？

Answer 1

在Ajax Success函数中使用

success: function(response) {
    if (response.status == true) {
        $('#categoryTable tbody').append(`
            <tr><td>${response.data.id}</td>
                <td class="data${response.data.id}">${response.data.name}</td>
                <td class="actionBtn">
                    <button type='button' class='ms-btn-icon btn-dark mr-3'
                        onclick='editCategory(${response.data.id})'>
                        <i class='flaticon-pencil'></i>
                    </button>
                    <button type='button' class='ms-btn-icon btn-danger' 
                        onclick='deleteData(${response.data.id})'>
                        <i class='flaticon-trash'></i>
                    </button>
                </td>
          </tr>`
       );
    }
});