如何通过POST方法将Laravel Blade中Alpine.js维护的数组传给控制器？

这里给你两种实用的实现方式，按需选择：

方案一：通过传统表单+隐藏字段提交 #

适合需要同步提交表单的场景：

1. 前端Alpine.js代码

<form method="POST" action="/your-controller-route">
    @csrf
    <!-- 添加数据的输入框 -->
    <input type="text" x-model="newItem" placeholder="输入内容">
    <button type="button" @click="addItem">添加</button>

    <!-- 隐藏字段：将Alpine数组转为JSON字符串提交 -->
    <input type="hidden" name="items" x-bind:value="JSON.stringify(items)">

    <button type="submit">提交表单</button>
</form>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('formData', () => ({
        newItem: '',
        items: [],
        addItem() {
            if (this.newItem.trim()) {
                this.items.push(this.newItem.trim());
                this.newItem = '';
            }
        }
    }))
})
</script>

2. Laravel控制器代码
   在对应控制器方法里解析JSON字符串为数组：

use Illuminate\Http\Request;

public function store(Request $request)
{
    // 可选：验证提交的JSON格式
    $request->validate([
        'items' => 'required|json',
    ]);

    // 解析JSON为PHP数组
    $items = json_decode($request->input('items'), true);

    // 后续业务逻辑，比如存入数据库
    // ...

    return redirect()->back()->with('success', '数据提交成功');
}

方案二：用Fetch API异步提交（无刷新） #

适合需要异步提交、页面不刷新的场景：

1. 前端Alpine.js代码

<div x-data="formData">
    <input type="text" x-model="newItem" placeholder="输入内容">
    <button @click="addItem">添加</button>
    <button @click="submitData">异步提交</button>

    <!-- 预览已添加的项 -->
    <ul>
        <template x-for="(item, index) in items" :key="index">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('formData', () => ({
        newItem: '',
        items: [],
        addItem() {
            if (this.newItem.trim()) {
                this.items.push(this.newItem.trim());
                this.newItem = '';
            }
        },
        async submitData() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
            try {
                const response = await fetch('/your-controller-route', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({ items: this.items })
                });

                const result = await response.json();
                alert('提交成功');
            } catch (error) {
                console.error('提交失败:', error);
            }
        }
    }))
})
</script>

2. Laravel控制器代码
   Laravel会自动解析JSON请求体，直接获取数组：

use Illuminate\Http\Request;

public function store(Request $request)
{
    // 可选：验证数组格式
    $request->validate([
        'items' => 'required|array',
        'items.*' => 'required|string',
    ]);

    // 直接获取提交的数组
    $items = $request->input('items');

    // 后续业务逻辑
    // ...

    return response()->json(['status' => 'success']);
}

注意：记得在Blade模板头部添加CSRF元标签，异步提交时需要用到：

<meta name="csrf-token" content="{{ csrf_token() }}">

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