如何在Laravel中通过Ajax从外部Blade文件调用模态框至HTML

没问题，我来帮你搞定这个需求！下面是具体的实现步骤：

1. 调整index.blade.php的代码 #

首先，你需要在index.blade.php中添加模态框的容器，并通过Laravel的视图引入指令@include加载同目录下的form.blade.php。同时保留你原有的按钮和addForm函数，稍作调整确保逻辑符合Laravel的规范：

<!-- 你的添加按钮 -->
<a onclick="addForm()" class="btn btn-success " style="float:right;">Tambah</a>

<!-- 模态框容器，用于承载form.blade.php的内容 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        @include('form') <!-- 这里引入同目录的form.blade.php -->
    </div>
</div>

<script type="text/javascript">
    let save_method; // 声明全局变量区分添加/编辑操作

    function addForm(){
        save_method = "add";
        $('input[name=_method]').val('POST'); // 改成Laravel规范的_method字段
        $('#myModal').modal('show');
        $('#myModal form')[0].reset();
        $('.modal-title').text('Tambah Kategori');
    }
</script>

2. 编写form.blade.php的内容 #

接下来，在同目录下创建（或修改）form.blade.php，编写符合Bootstrap模态框规范的表单内容：

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4> <!-- 标题会被addForm函数动态修改 -->
    </div>
    <form action="{{ route('kategori.store') }}" method="POST"> <!-- 替换成你的实际路由 -->
        @csrf
        <!-- 隐藏字段，用于指定HTTP请求方法 -->
        <input type="hidden" name="_method" value="POST">
        
        <div class="modal-body">
            <!-- 这里添加你的表单字段，示例如下 -->
            <div class="form-group">
                <label for="nama">Nama Kategori</label>
                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan nama kategori">
            </div>
            <!-- 可根据需求添加更多字段 -->
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary">Simpan</button>
        </div>
    </form>
</div>

关键细节说明 #

• 用@include('form')直接加载同目录的form.blade.php，模态框内容会提前嵌入到index页面，点击按钮即可直接显示，无需额外Ajax请求加载内容。
• Laravel中处理非POST请求的规范字段是_method，所以脚本里要对应修改选择器，避免表单提交出错。
• 请将form中的action="{{ route('kategori.store') }}"替换成你项目中实际的资源路由，确保表单提交到正确的后端处理方法。
• 如果后续需要扩展编辑功能，只需修改save_method变量，并调整_method的值为PUT，同时更新表单的action指向编辑路由即可。

内容的提问来源于stack exchange，提问作者Fajar Sidik