Laravel Blade无需Ajax传递下拉框选中值至content视图的方案

因为你不能使用Ajax/jQuery，以下是两种基于Laravel的简便同步实现方式：

方案一：GET表单提交（URL参数传递） #

这种方式直接通过页面跳转传递参数，实现最简单：

1. 修改index.blade.php的代码 #

把下拉框包裹在表单中，选中时自动提交表单，同时保留原页面的展示逻辑：

<div class="col-md-6">                              
  <form action="{{ route('content.show') }}" method="GET">
    <select name="xyz" id="xyz" onchange="this.form.submit(); myFunction()">
      <option value="xyz1">xyz1</option>
      <option value="xyz2">xyz2</option>
      <option value="xyx3">xyx3</option>
    </select>
    <p id="demo"></p> 
  </form>
</div>

<script>
    function myFunction() {
        var x = document.getElementById("xyz").value;
        document.getElementById("demo").innerHTML = x;
    }
</script>

2. 定义路由（routes/web.php） #

添加content页面的路由：

use App\Http\Controllers\ContentController;

Route::get('/content', [ContentController::class, 'show'])->name('content.show');

3. 控制器方法（ContentController.php） #

无需额外处理，直接返回视图：

public function show()
{
    return view('content');
}

4. 在content.blade.php中获取值 #

通过请求实例直接获取URL参数：

<p>选中的值：{{ request()->get('xyz') }}</p>

方案二：Session暂存（无URL参数） #

如果不想在URL中暴露参数，可以用Session暂存选中值：

1. 修改index.blade.php的代码 #

使用POST表单提交到中间处理路由：

<div class="col-md-6">                              
  <form action="{{ route('store.xyz') }}" method="POST">
    @csrf
    <select name="xyz" id="xyz" onchange="this.form.submit(); myFunction()">
      <option value="xyz1">xyz1</option>
      <option value="xyz2">xyz2</option>
      <option value="xyx3">xyx3</option>
    </select>
    <p id="demo"></p> 
  </form>
</div>

<script>
    function myFunction() {
        var x = document.getElementById("xyz").value;
        document.getElementById("demo").innerHTML = x;
    }
</script>

2. 定义路由（routes/web.php） #

添加处理存储和跳转的路由：

use App\Http\Controllers\ContentController;

Route::post('/store-xyz', [ContentController::class, 'storeXyz'])->name('store.xyz');
Route::get('/content', [ContentController::class, 'show'])->name('content.show');

3. 控制器方法（ContentController.php） #

存储选中值到Session，再跳转到content页面：

use Illuminate\Http\Request;

public function storeXyz(Request $request)
{
    session()->put('selected_xyz', $request->input('xyz'));
    return redirect()->route('content.show');
}

public function show()
{
    $selectedXyz = session()->get('selected_xyz');
    return view('content', compact('selectedXyz'));
}

4. 在content.blade.php中获取值 #

直接使用控制器传递的变量：

<p>选中的值：{{ $selectedXyz }}</p>

方案选择建议 #

• 方案一适合参数无需保密、需要支持页面刷新保留值的场景
• 方案二适合参数敏感、需要在多个页面复用选中值的场景

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