使用 JQuery Ajax 插入后如何在 laravel 中重新加载视图

Question

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

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

这是返回我的记录的控制器：

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');
                }
            });

这是插入记录并生成快速响应的控制器方法：

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

从控制器获取响应并将新行追加到表中。

        $.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);
}

Answer 2

对此有两种可能的解决方案。

1. window.location.reload() 重新加载页面。
2. 将新添加的记录作为响应发送，并在成功回调时将其附加到当前表中，以显示所有记录。 （无需重新加载）

编辑

您的控制器方法可能如下所示

public function store(Request $request)
{
    //

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

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

       $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);


}

现在您的响应数组有一个对象（新创建的主题记录），您可以通过成功回调中的subject 键访问它。

给你的表一个 id 并使用 jquery 访问它以附加一个包含你的 subject 记录的 <tr> </tr> 元素..

Answer 3

您可以使用加载功能。给你的桌子一个 id 并在你想要的时候使用它：

var url = '/page_adress';
$('#table_id').load(url + '#table_id>*');