如何通过AJAX POST无按钮点击实时传值给getDataDashboard函数

前端AJAX实现代码（Blade页面中） #

假设你的下拉选择框HTML结构如下：

<select id="filter-select" name="filter">
    <option value="daily">每日数据</option>
    <option value="weekly">每周数据</option>
    <option value="monthly">每月数据</option>
    <!-- 自定义选项 -->
</select>
<!-- 用于展示返回数据的容器 -->
<div id="dashboard-content"></div>

添加以下JavaScript代码（可放在页面底部或外部JS文件中）：

// 监听下拉框变化，实时触发请求
document.getElementById('filter-select').addEventListener('change', function() {
    const filterValue = this.value;

    fetch('{{ route('getDataDashboard') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}' // Laravel POST请求必需的CSRF令牌
        },
        body: JSON.stringify({ filter: filterValue })
    })
    .then(response => response.json())
    .then(data => {
        // 替换为实际的渲染逻辑，比如生成表格、图表
        document.getElementById('dashboard-content').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    })
    .catch(error => {
        console.error('请求失败:', error);
    });
});

后端控制器方法适配 #

确保你的getDataDashboard方法正确接收并赋值$filter变量：

use Illuminate\Http\Request;

public function getDataDashboard(Request $request)
{
    // 直接从POST请求中获取参数赋值给$filter
    $filter = $request->input('filter');

    // 这里编写你的业务逻辑，比如根据$filter查询数据
    $result = // 处理后的数据集合

    // 返回JSON格式结果给前端
    return response()->json($result);
}

关键配置说明 #

• 确保路由已正确定义（web.php中）：

  Route::post('/dashboard/get-data', [YourController::class, 'getDataDashboard'])->name('getDataDashboard');
  

• 若使用jQuery替代原生JS，可改用以下AJAX代码：

  $('#filter-select').on('change', function() {
      $.ajax({
          url: '{{ route('getDataDashboard') }}',
          method: 'POST',
          data: {
              _token: '{{ csrf_token() }}',
              filter: $(this).val()
          },
          success: function(data) {
              $('#dashboard-content').html(`<pre>${JSON.stringify(data, null, 2)}</pre>`);
          },
          error: function(xhr) {
              console.error(xhr.responseText);
          }
      });
  });
  

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