Laravel中如何通过AJAX提交表单后在指定Div加载页面内容

需求 #

在Laravel Blade中实现：通过AJAX提交表单后，将search.blade.php页面的内容加载到指定div元素中，同时控制器需将表单数据传递给该页面。

1. 搜索表单代码 #

<form data-action="{{ route('viewsearch') }}" method="POST" enctype="multipart/form-data" id="searchview">
    @csrf
    <input type="text" name="email" class="form-control" placeholder="用户名/邮箱" style="width:180px; float:left; font-size:12px;">
    <select name="cate" class="form-control" style="width:180px;  float:left; font-size:12px;">
        <option value="">选择分类</option>
        <option value="Programmer">程序员</option>
        <option value="Software Engineering">软件工程</option>
    </select>
    <button type="submit" class="btn btn-primary" style="width:180px; float:left; background-color:green; font-size:12px;">搜索专业人员</button>
</form>

2. 内容展示容器 #

用于承载search.blade.php内容的div，初始默认加载htmlview视图：

<div id="dataview">
    @include('htmlview')
</div>

3. AJAX提交与视图加载脚本 #

使用jQuery处理表单提交，阻止默认跳转，通过AJAX请求获取视图内容并更新到指定div：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var form = '#searchview';
    $(form).on('submit', function (event) {
        event.preventDefault();
        var url = $(this).attr('data-action');

        $.ajax({
            url: url,
            method: 'POST',
            data: new FormData(this),
            dataType: 'html', // 修正：控制器返回HTML视图，需将dataType改为html
            contentType: false,
            cache: false,
            processData: false,
            success: function (response) {
                $("#dataview").html(response)
            },
            error: function () {
                $("#dataview").html('<p class="text-danger">加载失败，请稍后重试</p>');
            }
        });
    });
});
</script>

4. Web路由配置 #

定义POST路由，关联控制器的viewsearch方法：

Route::post('viewsearch', [App\Http\Controllers\Controller::class, 'viewsearch'])->name('viewsearch');

5. 控制器处理方法 #

接收表单提交的参数，将数据传递给search.blade.php视图并返回：

public function viewsearch(Request $request)
{
    $user = $request->email;
    $cate = $request->cate;
    return view('search', ['user' => $user, 'cate' => $cate]);
}

内容的提问来源于stack exchange，提问作者Abdullah Al Mamun