javascript - 如何在使用 JQuery Ajax 插入后重新加载 Laravel 中的 View

Question

我正在使用 jQuery ajax 将记录插入到表中。它工作正常并返回一条闪存消息，通知记录已成功插入。现在我的问题是插入记录后我不知道如何重新加载我的表以便反射(reflect)更改。

注意我通过引导模式在表格所在的同一页面上插入。

这是返回我的记录的 Controller :

public function index()
{
    //
    $subjects = Subject::all();


    return view('subjects.show', compact('subjects'));
}

记录返回后，这就是我的显示方式:

<table class="table table-responsive table-hover table-condensed table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Level</th>
                            <th colspan="2">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($subjects as $subject)
                            <tr>
                                <td>{{$subject->name}}</td>
                                <td>{{$subject->level}}</td>
                                <td>
                                    <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a>
                                </td>
                                <td>
                                    <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>

这是我插入记录的脚本:

$(document).on('submit', '#subject-form', function(event) {
            event.preventDefault();
            /* Act on the event */

            var name = $('#name').val();
            var level = $('#level').val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                url: $("#subject-form").attr('action'),
                data: {name: name, level: level},
                success: function(response) {
                    console.log(response);

                    if (response.success) {
                        $.notify({
                            icon: 'glyphicon glyphicon-check',
                            message: response.success
                          },{
                              type: 'info',
                              timer: 4000,
                              offset: 20,
                              spacing: 10,
                              z_index: 1031,
                              delay: 5000,
                              placement: {
                                from: "bottom",
                                align: "right"
                              },

                              animate: {
                                enter: 'animated fadeInDown',
                                exit: 'animated fadeOutUp'
                              },
                        });
                    } else {
                        // display error
                    }

                    $('#subject-modal').modal('toggle');
                }
            });

这是插入记录并生成 Flash 响应的 Controller 方法:

public function store(Request $request)
{
    //

   //return json_encode(request('name'));
    $response = array();

   if (Subject::create(request(['name', 'level']))) {

       $response['success'] = '<b>'.request('name').'</b>'.' created successfully';
   } else {
       $response['fail'] ='Error creating subject: <b>'.request('name').'</b>'.'. Try again, if problem persist contact administrator';
   }

    return \Response::json($response);


}

有什么方法可以让我完成这项工作吗？感谢反馈和建议。谢谢!!!

Answer 1

从 Controller 获取响应并将新行追加到表中。

        $.ajax({
            type: "POST",
            url: $("#subject-form").attr('action'),
            data: {name: name, level: level},
            success: function (response) {
                console.log(response);

                if (response.success) {
                    var html = '<tr>';
                    html = '        <td>' + response.subject.name + '</td>';
                    html = '<td>' + response.subject.level + '</td>';
                    html = '<td>';
                    html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a>';
                    html = '</td>';
                    html = '<td>';
                    html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a>';
                    html = '</td>';
                    html = '</tr>';
                    $("table.table-responsive").append(html);
                    });
                } else {
                    // display error
                }

                $('#subject-modal').modal('toggle');
            }
        });

Controller 代码

public function store(Request $request) {
    $response = array();
    $data["name"] = request('name');
    $data["level"] = request('level');
    $subject = Subject::create($data);
    if ($subject) {
        $response['success'] = '<b>' . request('name') . '</b>' . ' created successfully';
        $response['subject'] = $subject;
    } else {
        $response['fail'] = 'Error creating subject: <b>' . request('name') . '</b>' . '. Try again, if problem persist contact administrator';
    }

    return \Response::json($response);
}