使用JS和Laravel传递变量至下一个视图失败问题排查

你当前的写法存在两个核心问题：

1. Laravel的route()函数会把':email'和':name'当作静态字符串参数处理，生成的URL中如果是查询参数，冒号可能被URL编码为%3A，导致JS的replace(':email')无法匹配，替换失效；
2. 如果表单的method是POST，URL里的查询参数不会被Laravel的request()助手默认识别，后端自然拿不到参数，视图就会提示email未定义。

方案1：使用隐藏表单域（推荐，符合表单提交规范） #

这是传递参数最稳妥的方式，避免URL编码和请求方法的冲突：

1. 修改表单，添加隐藏输入框（POST请求必须加CSRF令牌）：

<form id="specify-inform" action="{{ route('confirmation') }}" method="POST">
    @csrf
    <input type="hidden" name="email" id="form-email">
    <input type="hidden" name="name" id="form-name">
</form>

2. 编写JS代码给隐藏域赋值后提交：

document.getElementById('form-email').value = userEmail;
document.getElementById('form-name').value = data.found.name;
document.getElementById("specify-inform").submit();

3. 后端控制器获取参数并传递到视图：

public function confirmation(Request $request)
{
    return view('confirmation', [
        'email' => $request->email,
        'name' => $request->name
    ]);
}

方案2：拼接GET请求的URL参数 #

如果你的路由是GET类型，直接拼接编码后的参数：

// 获取路由基础URL
var baseUrl = "{{ route('confirmation') }}";
// 编码参数避免特殊字符破坏URL结构
var actionUrl = `${baseUrl}?email=${encodeURIComponent(userEmail)}&name=${encodeURIComponent(data.found.name)}`;
var form = document.getElementById("specify-inform");
form.method = 'GET'; // 确保表单使用GET方法
form.action = actionUrl;
form.submit();

后端同样通过request('email')和request('name')获取参数即可。

方案3：修正原替换逻辑（不推荐） #

如果坚持用原思路，改用独特占位符避免匹配冲突：

// 用独特占位符替代易冲突的:email/:name
var actionUrl = "{{ route('confirmation', ['email' => 'EMAIL_HOLDER', 'name' => 'NAME_HOLDER']) }}";
actionUrl = actionUrl.replace('EMAIL_HOLDER', encodeURIComponent(userEmail));
actionUrl = actionUrl.replace('NAME_HOLDER', encodeURIComponent(data.found.name));
var form = document.getElementById("specify-inform");
form.method = 'GET';
form.action = actionUrl;
form.submit();

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