Laravel 11中如何根据产品选择实时显示物品库存数量

下面是完整的实现方案，解决你当前无法实时同步数据库数值的问题：

1. 确认数据库表结构（假设表名为items） #

确保你的表包含核心字段：

CREATE TABLE items (
    id INT PRIMARY KEY AUTO_INCREMENT,
    item_name VARCHAR(255) NOT NULL,
    item_amount INT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

2. 模型（app/Models/Item.php） #

关联数据表并设置可填充字段：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    protected $fillable = ['item_name', 'item_amount'];
    // 若表名不是复数形式，需手动指定：protected $table = 'your_table_name';
}

3. 路由（routes/web.php） #

添加AJAX接口路由，用于获取实时库存：

<?php

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

// 加载页面的路由
Route::get('/items', [ItemController::class, 'index'])->name('items.index');

// AJAX接口：根据物品ID获取库存
Route::get('/get-item-amount', [ItemController::class, 'getItemAmount'])->name('item.amount');

4. 控制器（app/Http/Controllers/ItemController.php） #

实现页面加载和AJAX接口逻辑：

<?php

namespace App\Http\Controllers;

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

class ItemController extends Controller
{
    // 加载包含下拉选择器的页面
    public function index()
    {
        $items = Item::all();
        return view('items.index', compact('items'));
    }

    // 处理AJAX请求，返回对应物品的库存数量
    public function getItemAmount(Request $request)
    {
        // 验证请求参数，用ID查询避免同名物品冲突
        $request->validate([
            'item_id' => 'required|exists:items,id',
        ]);

        $item = Item::findOrFail($request->item_id);
        return response()->json(['amount' => $item->item_amount]);
    }
}

5. Blade视图（resources/views/items/index.blade.php） #

修改下拉选择器，添加实时更新逻辑（提供两种JS方案）：

<div class="container mt-5">
    <div class="mb-3">
        <label for="itemSelect" class="form-label">选择物品</label>
        <select id="itemSelect" class="form-select">
            <option value="">请选择...</option>
            @foreach($items as $item)
                <option value="{{ $item->id }}">{{ $item->item_name }}</option>
            @endforeach
        </select>
    </div>
    <div class="mb-3">
        <label class="form-label">当前库存</label>
        <div id="itemAmount" class="form-control bg-light">请选择物品查看数量</div>
    </div>
</div>

<!-- 方案1：使用jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#itemSelect').on('change', function() {
            const itemId = $(this).val();
            if (!itemId) {
                $('#itemAmount').text('请选择物品查看数量');
                return;
            }

            $.ajax({
                url: '{{ route('item.amount') }}',
                type: 'GET',
                data: { item_id: itemId },
                success: function(res) {
                    $('#itemAmount').text(res.amount);
                },
                error: function(xhr) {
                    $('#itemAmount').text('获取库存失败');
                    console.error(xhr.responseText);
                }
            });
        });
    });
</script>

<!-- 方案2：原生JS（无需jQuery）
<script>
document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('itemSelect');
    const amountEl = document.getElementById('itemAmount');

    select.addEventListener('change', function() {
        const itemId = this.value;
        if (!itemId) {
            amountEl.textContent = '请选择物品查看数量';
            return;
        }

        fetch('{{ route('item.amount') }}?item_id=' + itemId)
            .then(res => res.json())
            .then(data => amountEl.textContent = data.amount)
            .catch(err => {
                amountEl.textContent = '获取库存失败';
                console.error(err);
            });
    });
});
</script>
-->

关键修复说明 #

• 用ID代替物品名称查询：避免同名物品导致的数据错误，同时利用主键查询提升效率
• AJAX实时请求：每次下拉选择变化时直接请求后端最新数据，确保与数据库内容完全同步
• 请求验证：后端对传入的物品ID做存在性校验，防止无效请求引发错误
• 错误处理：添加AJAX错误回调，方便调试并给用户明确提示

测试步骤 #

1. 向items表添加测试数据
2. 访问/items页面
3. 切换下拉选择器，观察库存数量是否实时更新且与数据库值一致

内容的提问来源于stack exchange，提问作者Yuda AdyaJudha