使用 AJAX 和 Laravel 的 CRUD。添加新记录后，新响应（更新数据）不会替换我当前 table 的 tbody，无需重新加载

Question

Table 中的数据来自数据库

HTMLTable代码：

<table id="mytable" class="table">
     <thead>
          <tr>
              <th>DB-ID</th>
              <th>Name</th>
              <th>Age</th>
              <th>Degree</th>
              <th>Cell</th>
              <th>Edit</th>
              <th>Delete</th>
           </tr>
      </thead>
       <tbody>
            @if ($records->count() > 0)
                @foreach($records as $record)
                      <tr>
                           <td>{{$record->id}}</td>
                           <td>{{$record->name}}</td>
                           <td>{{$record->age}}</td>
                           <td>{{$record->degree}}</td>
                           <td>{{$record->cell}}</td>
                      </tr>
                 @endforeach
            @else
                <span style="color:red">{{ 'Record Not Found' }}</span><br><br>
            @endif
      </tbody>
</table>

单击 ajax 接收数据并存储在数据库中，但
它没有更新我当前 table 的 tbody 的新响应（来自数据库的更新数据），无需重新加载
使用 $("tbody").html(responce); 它会消失所有 table 记录
使用$("tbody").append(responce)；没有变化发生
使用 $("tbody").html(row); 所有以前的记录都消失了，只显示新行
使用$("tbody").append(row);它不会消失以前的记录并显示所有行
我想在不重新加载的情况下使用新数据更新当前 table

AJAX代码：

            $.ajax({
            type: "GET",
            url: " {{route('record.create')}}",
            data: {name: name, age: age, degree: degree, cell: cell},
            success: function (responce) {
                // location.reload(); 
                    $.each(responce, function( index, value ) {
                    var row = $("<tr><td>" 
                                + value.id + "</td><td>" 
                                + value.name + "</td><td>" 
                                + value.age + "</td><td>" 
                                + value.degree + "</td><td>" 
                                + value.cell + "</td></tr>");

                  // $("tbody").html(responce); //all table record vanished
                  // $("tbody").append(responce); //no change
                  // $("tbody").html(row);  //all previous record vanish and new row shown
                  // $("tbody").append(row); //not vanish previous record and show all rows as well 
                });
            }
        });

web.php路线：

Route::get('main', 'CrudController@store')->name('record.create');

控制器：

public function store(Request $request)
{
    $record = new Record($request->except('_token'));
    $record->save();

    $records = Record::all(); 

    return Response::json($records);

}

查看所有记录路线：

Route::get('record', 'CrudController@view')->name('record.view');

视图控制器：

public function view()
{
    $records = Record::all(); 

    return view('main', compact('records'));
}

Answer 1

我认为你应该先删除你的 table，然后再从响应中注入新数据。

$.ajax({
        type: "GET",
        url: " {{route('record.create')}}",
        data: {name: name, age: age, degree: degree, cell: cell},
        success: function (responce) {
             $('#formdata')[0].reset();
             $("tbody").html("");
             $.each(responce, function( index, value ) {
                var row = $("<tr><td>" 
                            + value.id + "</td><td>" 
                            + value.name + "</td><td>" 
                            + value.age + "</td><td>" 
                            + value.degree + "</td><td>" 
                            + value.cell + "</td></tr>");

                $("tbody").append(row);
            });
        }
    });

Answer 2

$("tbody").html("");
                jQuery.each(data, function(key,value){
                 // $('#org_name').text( value.name );
                  $("table").append("<tr><td>" 
                            + value.id + "</td><td>" 
                            + value.name + "</td><td>" 
                            + value.age + "</td><td>" 
                            + value.degree + "</td><td>" 
                            + value.cell + "</td></tr>");
});

它附加 tbody 多次将“tbody”更改为“table”并且 boom 它会开始正常工作

使用 AJAX 和 Laravel 的 CRUD。添加新记录后，新响应（更新数据）不会替换我当前 table 的 tbody，无需重新加载

CRUD using AJAX & Laravel. After adding a new record, new response (updated data) is not replacing my current tbody of my table WITHOUT RELOADING

ajax

crud

laravel