在PHP Blade模板的JavaScript中注入JS变量失败的问题

Blade模板里的{{ }}是服务器端提前渲染的，页面加载时PHP就会执行这段代码并生成HTML；而success回调里的data是客户端异步请求完成后才拿到的JS变量，两者执行时机完全错开——PHP渲染时，JS的data还不存在，所以直接在{{ }}里引用data.especie肯定拿不到正确值。

方法一：提前渲染模板框架，客户端填充数据 #

先在Blade里渲染一个带占位符的模板，存到页面中，之后在JS回调里用实际数据替换占位符：

<!-- 提前在Blade中渲染带占位符的模板 -->
<script id="especie-select-tpl" type="text/template">
    {{ view('especies.select', [
        'especie' => (object)[
            'id' => '__ESPECIE_ID__',
            'nombre' => '__ESPECIE_NOMBRE__'
            // 模板用到的其他字段都用类似占位符
        ]
    ])->render() }}
</script>

<script>
swal(...),
success(data){
    // 替换模板里的占位符为真实数据
    let renderedHtml = $('#especie-select-tpl').html()
        .replace('__ESPECIE_ID__', data.especie.id)
        .replace('__ESPECIE_NOMBRE__', data.especie.nombre);
    // 有其他字段就继续添加replace

    $('#especie').select2("trigger", "select", {
        data: {
            id: data.id_especie,
            text: "(" + data.especie.id + ") " + data.especie.nombre,
            html: renderedHtml
        },
        templateResult: iconosTemplate,
        templateSelection: iconosTemplate
    });
}
</script>

方法二：AJAX请求后端获取渲染好的HTML #

给后端加一个接口，接收物种ID，返回渲染完成的模板HTML，前端在回调里请求这个接口拿到内容：

后端路由（Laravel示例） #

// routes/web.php
Route::get('/especie/render-select/{id}', function($id) {
    $especie = \App\Models\Especie::findOrFail($id);
    return view('especies.select', ['especie' => $especie])->render();
});

前端JS代码 #

swal(...),
success(data){
    $.get(`/especie/render-select/${data.especie.id}`, function(renderedHtml) {
        $('#especie').select2("trigger", "select", {
            data: {
                id: data.id_especie,
                text: "(" + data.especie.id + ") " + data.especie.nombre,
                html: renderedHtml
            },
            templateResult: iconosTemplate,
            templateSelection: iconosTemplate
        });
    });
}

• 方法一适合模板简单、字段少的场景，不需要额外接口，性能更高；
• 方法二适合模板复杂、需要后端处理数据逻辑的场景，数据更安全，维护更方便。

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