Laravel 5中使用GET表单构建自定义格式URL的问题

首先得说清楚：HTML原生的GET表单只会把字段拼在URL的查询字符串（?后面），没办法直接生成你想要的路径参数格式。要实现/test/horse/cat/dog这种URL，我们得用一点点JS来拦截表单提交，手动构造目标URL然后跳转。

下面是具体的解决步骤：

1. 修正表单字段与路由参数的对应关系 #

你的路由参数是param1/param2/param3，但表单里的input名字是animal1/animal2/animal3，先把它们统一起来（也可以在JS里做映射，但直接统一更省心）。同时移除多余的csrf_field()——Laravel默认不对GET请求做CSRF验证，留着它反而会在URL里多出?_token参数：

<form id="animal-form" action="{{ route('test', ['param1' => '', 'param2' => '', 'param3' => '']) }}" method="get">
    <div class="col-md-3">
        <div class="form-group">
            <label for="param1">animal1</label>
            <br>
            <input type="text" name="param1" class="form-control" id="param1">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="param2">animal2</label>
            <input type="text" name="param2" class="form-control" id="param2">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="param3">animal3</label>
            <input type="text" name="param3" class="form-control" id="param3">
        </div>
    </div>
    <div class="col-md-12">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

2. 添加JavaScript拦截表单提交 #

在页面底部（或者你的自定义JS文件里）添加这段代码，用来拦截表单的默认提交行为，手动构造符合路由规则的URL并跳转：

document.getElementById('animal-form').addEventListener('submit', function(e) {
    // 阻止表单默认的GET提交逻辑
    e.preventDefault();
    
    // 获取三个输入框的内容，顺便去掉首尾空格
    const param1 = document.getElementById('param1').value.trim();
    const param2 = document.getElementById('param2').value.trim();
    const param3 = document.getElementById('param3').value.trim();
    
    // 可选：简单验证输入是否为空，根据你的业务需求调整
    if (!param1 || !param2 || !param3) {
        alert('请填写所有动物名称！');
        return;
    }
    
    // 利用Laravel路由生成基础URL，替换占位符为实际输入值
    const baseUrl = "{{ route('test', ['param1' => ':param1', 'param2' => ':param2', 'param3' => ':param3']) }}";
    const targetUrl = baseUrl
        .replace(':param1', encodeURIComponent(param1))
        .replace(':param2', encodeURIComponent(param2))
        .replace(':param3', encodeURIComponent(param3));
    
    // 跳转到构造好的目标URL
    window.location.href = targetUrl;
});

3. 控制器方法适配 #

确保你的控制器方法能正确接收路径参数，两种方式都可以：

// 方式1：直接在方法参数里声明
public function test($param1, $param2, $param3)
{
    // 处理逻辑，比如传递参数到视图
    return view('test', compact('param1', 'param2', 'param3'));
}

// 方式2：通过请求对象获取
use Illuminate\Http\Request;

public function test(Request $request)
{
    $param1 = $request->route('param1');
    $param2 = $request->route('param2');
    $param3 = $request->route('param3');
    // 后续逻辑...
}

这样操作后，提交表单就能得到你想要的http://example.com/test/horse/cat/dog格式的URL了，页面每10秒刷新时，参数会保留在URL路径里，控制器也能正常获取到数据。

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