如何在Bootstrap modal中动态加载内容 - Laravel 9Bootstrap modal是一个弹出框，用

Bootstrap modal是一个弹出框，用于显示信息和输入表单。

你也可以在每次打开时使用AJAX动态更新其内容。

在本教程中，我展示了如何在Laravel 9中使用jQuery AJAX动态加载Bootstrap modal的内容。

How to Dynamically load content in Bootstrap modal - Laravel 9

演示

内容

1. 数据库配置

打开.env 文件。

指定主机、数据库名称、用户名和密码。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

2. 表的结构

使用迁移创建一个新的表employees 。

php artisan make:migration create_employees_table

现在，从项目根目录导航到database/migrations/ 文件夹。
找到一个以create_employees_table 结尾的PHP文件并打开它。
在up() 方法中定义表的结构。

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
       $table->bigIncrements('id');
       $table->string('username');
       $table->string('name');
       $table->string('email');
       $table->smallInteger('age');
       $table->timestamps();
    });
}

运行迁移------。

php artisan migrate

表已经创建，我向它添加了一些记录。

3. 模型

创建Employees 模型。

php artisan make:model Employees

打开app/Models/Employees.php 文件。
使用$fillable 属性指定大量可分配的模型属性 - 用户名、姓名、电子邮件和年龄。

完成的代码

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
   use HasFactory;

   protected $fillable = [
      'username','name','email','age'
   ];
}

4. 控制器

创建EmployeesController 控制器。

php artisan make:controller EmployeesController

导入Employees 模型。

创建2个方法 -

**index() -**从employees 表中获取所有记录并分配给$data['employees'] 。加载index 视图并传递给$data 。
**getEmployeeDetails() -**这个方法需要雇员ID作为参数。从employees 表中按id 取出一条记录并创建一个布局。将$html 赋给$response['html'] 。

以JSON格式返回$response 。

完成的代码

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller {

   public function index(){
      $data['employees'] = Employees::select('*')->get();
      return view('index',$data);
   }

   public function getEmployeeDetails($empid = 0){

      $employee = Employees::find($empid);

      $html = "";
      if(!empty($employee)){
         $html = "<tr>
              <td width='30%'><b>ID:</b></td>
              <td width='70%'> ".$employee->id."</td>
           </tr>
           <tr>
              <td width='30%'><b>Username:</b></td>
              <td width='70%'> ".$employee->username."</td>
           </tr>
           <tr>
              <td width='30%'><b>Name:</b></td>
              <td width='70%'> ".$employee->name."</td>
           </tr>
           <tr>
              <td width='30%'><b>Email:</b></td>
              <td width='70%'> ".$employee->email."</td>
           </tr>
           <tr>
              <td width='30%'><b>Age:</b></td>
              <td width='70%'> ".$employee->age."</td>
           </tr>";
      }
      $response['html'] = $html;

      return response()->json($response);
   }

}

5. 路线

打开routes/web.php 文件。
定义2个路由 -
- **/ -**加载index 视图。
- **/getEmployeeDetails -**这是AJAX请求的GET类型路由。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']); 
Route::get('/getEmployeeDetails/{empid}', [EmployeesController::class, 'getEmployeeDetails'])->name('getEmployeeDetails');

6. 视图

在resources/views/ 中创建index.blade.php 文件。

HTML

包括Bootstrap和jQuery库。

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/

使用jQuery AJAX创建#empModal 模态，显示员工信息。

在$employees 上循环，在<table > 中列出记录。在最后一列添加一个<button > ，以便在点击时打开模态。在data-id 属性中定义了雇员ID。

脚本

在<button class='viewdetails' > 上定义了click 事件。
从data-id 属性中读取雇员ID，并将其分配给id 变量。
清空模版<table ><tbody> 。
发送AJAX GET请求到getEmployeeDetails 路径，将雇员ID作为参数。
在成功的回调中，用响应替换模态<table id="tblempinfo"><tbody> ，并打开模态#empModal 。

完成的代码

<!DOCTYPE html>
<html>
<head>
   <title>How to Dynamically load content in Bootstrap modal - Laravel 9</title>

   <!-- Meta -->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">

   <!-- CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/

7. 演示

查看演示

8. 总结

当按钮被点击显示模态时，发送AJAX请求以加载数据。在调用modal('show') 之前更新模态数据。

如果你觉得这个教程有帮助，那么别忘了分享。