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

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

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

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

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>

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

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


}

公共函数存储（请求$Request）
{
//
//返回json_encode（请求（'name'））；
$response=array（）；
if（Subject:：create（请求（['name'，'level']））{
$response['success']=''。请求（'name'）。'created successfully'；
}否则{
$response['fail']='Error creating subject:'。请求（'name'）。如果问题仍然存在，请与管理员联系，再试一次；
}
return\Response:：json（$Response）；
}

---

有没有办法让这一切顺利进行？感谢您的反馈和建议。谢谢

这有两种可能的解决方案

window.location.reload（）

重新加载页面

将新添加的记录作为响应发送，并在成功回调时将其追加到显示所有记录的当前表中。（无需重新加载）

编辑

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

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


}

公共函数存储（请求$Request）
{
//
//返回json_encode（请求（'name'））；
$response=array（）；
如果（$subject=subject:：create（请求（['name'，'level']））{
$response['success']=''。请求（'name'）。'created successfully'；
$response['subject']=$subject；
}否则{
$response['fail']='Error creating subject:'。请求（'name'）。如果问题仍然存在，请与管理员联系，再试一次；
}
return\Response:：json（$Response）；
}

现在，您的响应数组有一个对象（新创建的主题记录），您可以通过success回调中的

subject

键访问它

---

为您的表提供一个

id

，并使用jquery访问该表，以附加一个

元素，该元素包含您的

主题

记录。

两种可能的解决方案

window.location.reload（）

重新加载页面

将新添加的记录作为响应发送，并在成功回调时将其追加到显示所有记录的当前表中。（无需重新加载）

编辑

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

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


}

公共函数存储（请求$Request）
{
//
//返回json_encode（请求（'name'））；
$response=array（）；
如果（$subject=subject:：create（请求（['name'，'level']））{
$response['success']=''。请求（'name'）。'created successfully'；
$response['subject']=$subject；
}否则{
$response['fail']='Error creating subject:'。请求（'name'）。如果问题仍然存在，请与管理员联系，再试一次；
}
return\Response:：json（$Response）；
}

现在，您的响应数组有一个对象（新创建的主题记录），您可以通过success回调中的

subject

键访问它

---

为您的表指定一个

id

，并使用jquery访问它，以附加一个

元素，该元素包含您的

主题

记录。

您可以使用load函数。为您的表提供一个id，并在需要时使用该id：

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

---

您可以使用load函数。为您的表提供一个id，并在需要时使用该id：

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

---

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

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

---

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

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

---

为什么不在JavaScript中调用window.location.reload（）呢？否则，您需要刷新浏览器中的HTML内容。Ajax也能提供这些内容。@btl window.location.reload（）会重新加载页面，但不起作用，这将关闭对话框并显示flash消息。如何刷新html内容？发出AJAX请求并使用return response（）->json（$reponse）；，返回新数据；。然后在成功回调中，将数据附加到HTML文档中。@btl在我的控制器存储方法中，我确信这是应该完成的地方，但是现在根据我所拥有的，我可以同时返回响应和flash消息吗？@btl我目前只返回带有响应字段的flash消息。为什么不在JavaScript中调用window.location.reload（）？否则，您需要刷新浏览器中的HTML内容。Ajax也能提供这些内容。@btl window.location.reload（）会重新加载页面，但不起作用，这将关闭对话框并显示flash消息。如何刷新html内容？发出AJAX请求并使用return response（）->json（$reponse）；，返回新数据；。然后在成功回调中，将数据附加到HTML文档中。@btl在我的控制器存储方法中，我确定应该这样做，但现在根据我所拥有的，我可以返回响应和flash消息吗？@btl我当前只返回带有响应字段的flash mess。如何执行选项2？@NathanSiafa，检查编辑是否足以让你理解这个想法。我做了这个

$（“#主题”）。附加（''+response.subject+''）

，我得到了

[object object]

让我存档我必须将id添加到tbody标签。@Nathan Siafa很高兴你完成了这项工作：）我怎么做选项2？@NathanSiafa，检查编辑是否足以让您理解这个想法。我这样做了

$（'#主题'）。附加（''+response.subject+''）

，我得到了

[object object]

，我必须将id归档到tbody标签。@Nathan Siafa很高兴你完成了这项工作：）