如何通过jQuery Ajax在Blade中正确渲染Admin权限条件按钮？

你遇到的核心问题是把服务器端的Blade模板语法直接混在了客户端执行的JavaScript代码里——Blade的@if是在服务器解析视图的时候执行的，而你的JS代码是浏览器拿到页面后才运行的，浏览器根本不认识@if这种语法，自然会抛出语法错误。

下面给你几种可行的解决思路：

思路1：提前在Blade中定义权限标识变量 #

先在Blade视图里，把用户是否为admin的判断结果存在一个JS变量里，之后在JS代码里用这个变量做条件判断：

{{-- 在Blade的<script>标签里先定义权限变量 --}}
<script>
// 服务器端解析后，这里会直接变成true或false
const isAdmin = {{ Auth::check() && Auth::user()->rol === 'admin' ? 'true' : 'false' }};

// 你的原有JS逻辑
function tuFuncion() {
    let codigo = '';
    for(let i = 0; i < puntos.length; i++) {
        codigo += '<tr>...<td class=""><input name="incertidumbre['+i+']" class="pl-2 font-weight-bolder sinbordeimpar" value="'+puntos[i].incertidumbre+'" disabled></td>';
        
        // 用之前定义的isAdmin变量做判断
        if(isAdmin) {
            // 注意这里修复了name/id的引号拼接错误
            codigo += '<td><input class="btn btn-sm btn-outline-secondary" type="button" value="Editar" name="btnedit_Punto'+puntos[i].id+'" id="btnEditar_Punto'+puntos[i].id+'">';
            codigo += '<input hidden="hidden" class="btn btn-sm btn-outline-secondary" type="button" value="Guardar" name="btnGuardar_Punto'+puntos[i].id+'" id="btnGuardar_Punto'+puntos[i].id+'"></td>';
        }
        
        codigo += '</tr>';
    }
    $('#prueba').html(codigo);
}
</script>

思路2：在Blade中预渲染按钮模板 #

如果你想让服务器端直接生成按钮的HTML片段，可以在Blade里提前把模板字符串渲染好，然后在JS里复用：

{{-- 在Blade里预渲染admin按钮的模板（用模板字符串占位符） --}}
<script>
const adminButtonsTemplate = `{!! Auth::check() && Auth::user()->rol === 'admin' ? '<td><input class="btn btn-sm btn-outline-secondary" type="button" value="Editar" name="btnedit_Punto\${puntoId}" id="btnEditar_Punto\${puntoId}"><input hidden="hidden" class="btn btn-sm btn-outline-secondary" type="button" value="Guardar" name="btnGuardar_Punto\${puntoId}" id="btnGuardar_Punto\${puntoId}"></td>' : '' !!}`;

function tuFuncion() {
    let codigo = '';
    for(let i = 0; i < puntos.length; i++) {
        codigo += '<tr>...<td class=""><input name="incertidumbre['+i+']" class="pl-2 font-weight-bolder sinbordeimpar" value="'+puntos[i].incertidumbre+'" disabled></td>';
        
        // 替换模板里的占位符，拼接到codigo中
        if(adminButtonsTemplate) {
            const buttons = adminButtonsTemplate.replace(/\${puntoId}/g, puntos[i].id);
            codigo += buttons;
        }
        
        codigo += '</tr>';
    }
    $('#prueba').html(codigo);
}
</script>

额外注意点 #

你原来的JS代码里还有一个小问题：name="btnedit_Punto"'+puntos[i].id+'"这种写法会导致HTML属性的引号不闭合，比如最终会变成name="btnedit_Punto"123"，这是无效的HTML。上面的解决方案里已经修复了这个问题，改成了name="btnedit_Punto'+puntos[i].id+'"，确保引号正确包裹属性值。

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