如何将JavaScript中的变量传递并赋值给Twig变量

你没法直接把运行时的JavaScript变量赋值给Twig变量，两者的执行时机和环境完全不重叠：

• Twig是服务端模板引擎，在页面发送到用户浏览器之前，就已经在服务器上完成了解析渲染，输出最终的静态HTML、JS代码
• JavaScript是页面加载到用户本地浏览器之后，才在客户端环境执行的代码

场景1：JS里的值是固定写死的静态值 #

如果你例子里的myid = 823是提前就确定的固定值，完全没必要等JS执行再赋值，直接在Twig层定义变量，渲染输出到JS里即可，两边值保持一致：

{# Twig层定义变量 #}
{% set myId = 823 %}
<script>
// Twig渲染后会直接输出 var myid = 823;
var myid = {{ myId }};
</script>

场景2：JS变量是客户端运行时生成的动态值 #

如果myId是JS在浏览器端运行时才拿到的动态值（比如用户点击操作生成、前端接口请求返回的值），这时候Twig早就完成渲染了，必须把值通过请求传回后端，后端拿到值之后再传入Twig完成渲染：

1. JS端动态拿到值之后，发请求把值传给后端接口：

var myid = 823; // 运行时动态拿到的值
// 发送POST请求传值
fetch('/your-backend-api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ myId: myid })
})
.then(res => res.text())
.then(twigRenderResult => {
  // 拿到后端用传入值渲染好的Twig内容，插入到页面对应位置即可
  document.getElementById('content-wrap').innerHTML = twigRenderResult;
})

2. 后端接收参数，传给Twig渲染（以PHP后端为例）：

// 读取前端POST传过来的参数
$requestData = json_decode(file_get_contents('php://input'), true);
$myId = $requestData['myId'];
// 传值给Twig模板渲染
echo $twig->render('target-template.html.twig', [
  'myId' => $myId
]);

3. Twig模板里直接使用传入的值即可：

{% set myId = myId %}
<p>当前拿到的ID值为：{{ myId }}</p>

注意：不要尝试直接在页面的script标签里写Twig赋值语法读取JS变量，Twig的语法标签在服务端渲染阶段就会被解析替换成普通文本，等JS在浏览器执行的时候，页面里已经不存在Twig语法标记了，不可能完成赋值。

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