php 如何在Laravel 9中使用 AJAX 渲染视图

hsvhsicv  于 2023-02-18  发布在  PHP
关注(0)|答案(2)|浏览(172)

我想在不刷新页面的情况下呈现一个视图,所以我使用Ajax来呈现视图。看起来我的$scores不起作用,它应该是一个数组吗?我读过一些关于它应该是json数据的文章?
控制器:

$scores = DB::table('scores')->select('teamname', 'score')->get();
$table_view = view('score_table.blade.php', ['scores'=>$scores])->render();
return response()->json(['succes' => true, 'table_view' => $table_view]);

查看score_表格. blade. php

<table>
    <tr>
        <th> Teamname </th>
        <th> Score </th>
    </tr>
    @foreach($scores as $score)
        <tr>
            <td> {{ $score->teamname }} </td>
            <td> {{ $score->score }} </td>
        </tr>
    @endforeach
</table>

Ajax函数

success:function(data){
            
            $('#scoreresult').html(data.table_view);

         }

我很肯定它会工作,但它没有:(谁能帮我解决这个问题?非常感谢!

abithluo

abithluo1#

你的逻辑很好,但需要做一些修改。
你不需要传递blade文件的全名,可以使用compact。
控制器:

$scores = DB::table('scores')->select('teamname', 'score')->get();
$table_view = view('score_table', compact('scores'))->render();
return response()->json(['succes' => true, 'table_view' => $table_view]);

同时确认你是否在ajax请求中发送json类型的内容。

dataType: "json",
success:function(data){
      $('#scoreresult').html(data.table_view);
}
58wvjzkj

58wvjzkj2#

我也有同样的要求,但当我尝试做以下事情时遇到了一些问题:

$view =   view('pages.portals.admin.partials.view-model')->with("model",$thisModel)
 ->render();
  return response()->json(['view'=>$view]);

我遇到的问题是页面使用Axios库在每次 AJAX 请求时刷新自己,如下所示:

axios.get(path).then(function(res) {
                if (res.data.view) {
                    $(res.data.view).appendTo("body");
                    //show the modal dialog
                    $('#modelView').modal({
                            centered: false,
                            closable: false,
                            onHidden:function(){
                                $(this).remove();
                            }
                        })
                        .modal('show');
                }

            });

我通过在请求标题上附加application/json解决了这个问题,如下所示:

axios.get(path,{
                headers: {
                    'Content-Type': 'application/json',
                    },

            }).then(function(res) {

                if (res.data.view) {
                    $(res.data.view).appendTo("body");
                    //show the modal dialog
                    $('#modelView').modal({
                            centered: false,
                            closable: false,
                            onHidden:function(){
                                $(this).remove();
                            }
                        })
                        .modal('show');
                }

            });

相关问题