Twig环境下如何将JavaScript变量赋值给PHP变量

我遇到了一个问题，需要把JavaScript中的值传递给PHP变量（使用Twig框架），尝试了几种方法都没成功：

<script type="text/javascript">
    var display = localStorage.getItem('display');
    console.log(display); // 输出正常
    
    {% set temp = display %}
</script>
{{ temp }} // 输出：空值


{% set temp = "<script>localStorage.getItem('display')</script>" %}
{{ temp }} // 输出：<script>localStorage.getItem('display')</script>

<script>document.cookie = "display=" + localStorage.getItem('display')</script>
{{ app.request.cookies.get('display') }} // 输出：空值

为什么你的尝试无效？ #

核心原因是执行顺序差异：

• Twig/PHP是服务器端渲染，在页面发送到浏览器前就已经执行完毕；
• JavaScript是客户端代码，只有页面加载到浏览器后才会运行。

所以你尝试的方法本质上都是在服务器端代码里引用客户端变量，这根本不可能直接生效：

1. 第一种方法中，Twig解析{% set temp = display %}时，display是未定义的Twig变量，自然赋值为空；
2. 第二种方法只是把JS代码当作字符串输出，Twig不会执行客户端JS；
3. 第三种方法设置cookie后，当前请求已经结束，app.request.cookies只能获取当前请求携带的cookie，必须刷新页面或发起新请求才能拿到新设置的cookie。

可行解决方案 #

方案1：通过AJAX异步传递数据（无刷新） #

用JS将数据发送到后端PHP接口，后端存储数据后，后续请求中Twig即可获取：

前端JS代码

var display = localStorage.getItem('display');
// 发送POST请求到后端接口
fetch('/save-display', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    // 如果用Symfony，记得加CSRF令牌
    'X-CSRF-Token': '{{ csrf_token("save_display") }}'
  },
  body: 'display=' + encodeURIComponent(display)
});

后端PHP代码（以Symfony控制器为例）

public function saveDisplay(Request $request, SessionInterface $session)
{
    $display = $request->request->get('display');
    // 存储到session，Twig可直接读取
    $session->set('display', $display);
    return new JsonResponse(['status' => 'success']);
}

Twig模板中读取

{{ app.session.get('display') }}

注意：AJAX是异步操作，当前页面需要刷新或后续请求才能拿到最新值。

方案2：设置Cookie后刷新页面 #

如果允许页面刷新，可以设置Cookie后重新加载页面，让新请求携带Cookie：

var display = localStorage.getItem('display');
// 设置Cookie并指定路径
document.cookie = "display=" + encodeURIComponent(display) + "; path=/";
// 刷新页面
window.location.reload();

刷新后Twig即可读取：

{{ app.request.cookies.get('display') }}

方案3：通过表单提交传递数据 #

页面加载时用JS填充隐藏表单并提交，让后端直接接收数据：

<form id="displayForm" method="POST" action="{{ path('your_page_route') }}">
  <input type="hidden" id="displayInput" name="display">
  <input type="hidden" name="_token" value="{{ csrf_token('display_submit') }}">
</form>

<script>
var display = localStorage.getItem('display');
document.getElementById('displayInput').value = display;
document.getElementById('displayForm').submit();
</script>

后端接收数据后传递给Twig：

public function yourPage(Request $request)
{
    $display = $request->request->get('display');
    return $this->render('your_template.html.twig', [
        'display' => $display
    ]);
}

Twig中直接使用：

{{ display }}

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