Alpine JS/Laravel技术问题：如何获取标签值并传递至控制器

当然可以用Alpine JS实现异步查询，不需要局限于按钮+Blade的同步方式，以下是具体实现步骤：

1. 完善前端Alpine组件 #

把你的单选框代码包裹在Alpine根组件中，添加数据监听和异步请求逻辑：

<div x-data="{
    Dates: [], 
    Three: '',
    results: []
}" x-init="Dates = @json($dates)">
    <template x-for="Date in Dates" :key="Date.id">
        <input 
            x-model="Three" 
            name="CheckThing1" 
            type="radio" 
            :value="Date.id"
            @change="fetchData()"
        />
        <span x-text="Date.id"></span> <!-- 可选：显示日期ID方便测试 -->
    </template>

    <!-- 展示查询结果 -->
    <div x-show="results.length > 0" class="mt-4">
        <h3>查询结果</h3>
        <ul>
            <template x-for="item in results" :key="item.id">
                <li x-text="item.name"></li> <!-- 根据你的数据字段调整 -->
            </template>
        </ul>
    </div>
</div>

2. 编写异步请求方法 #

在Alpine的x-data里添加fetchData方法，用axios发送请求（Laravel默认已引入axios）：

fetchData() {
    if (!this.Three) return;
    axios.get('/api/query-by-date', {
        params: { date_id: this.Three }
    })
    .then(response => {
        this.results = response.data;
    })
    .catch(error => {
        console.error('请求失败:', error);
    });
}

3. 配置Laravel后端 #

路由（routes/api.php） #

Route::get('/query-by-date', [YourController::class, 'queryByDate']);

控制器方法 #

public function queryByDate(Request $request)
{
    $dateId = $request->query('date_id');
    // 执行你的数据库查询逻辑，比如：
    $data = YourModel::where('date_id', $dateId)->get();
    return response()->json($data);
}

关键说明 #

• 单选框的x-model="Three"会自动同步选中的Date.id到Three变量
• @change="fetchData()"会在选中项变化时立即触发异步请求
• 后端返回JSON数据后，Alpine会自动更新页面上的结果展示，无需刷新页面

如果你还是想用按钮触发，只需要把@change换成按钮的@click="fetchData()"即可，灵活性很高。

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