如何通过jQuery正确输出PHP遍历生成的内容并解决相关语法报错

• 通过jQuery渲染DIV元素时，PHP遍历逻辑生成的内容初始为空，页面输出NaN
• 调整引号与特殊重音字符后，控制台抛出与<相关的token语法错误，累计调试2小时未定位根因

function activateButtonSend(action){
    var addButton = "";
    var php = "";
    if (action === true) {
        php += @php
            App\Models\Activity::getOptionsForMail()->map(function($name,$id){
                echo "<a class='dropdown-item btn-act-".$id."' href='javascript:sendComments(".$id.");'>".$name."</a>";
            });
        @endphp
        addButton = "<div class='f-flex float-right' id='dropdown-activities'>\
                        <button id='content-message' style='display: none' type='button' class='btn btn-lg iq-bg-primary-abs dropdown-toggle'\
                            data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>\
                                Guardar\
                        </button>\
                        <div class='dropdown-menu' aria-labelledby='btnGroupDrop1'>'"+php+"'</div>\
                    </div>";
    }else{
        addButton = '<button type="submit" id="content-message" style="display: none" class="btn iq-bg-primary-abs btn-lg float-right action-button-submit">Guardar</button>';
    }

    $('#type_buttons').html(addButton);
}

逻辑说明：activateButtonSend接收action参数，参数为true时通过Blade的@php块（<?php ?>简写）调用模型方法遍历生成下拉菜单项，拼接进jQuery构造的HTML字符串后注入#type_buttons节点；参数为false时渲染普通提交按钮。

1. 直接在JS变量赋值语句的中间内嵌@php执行块，服务端渲染时会把echo输出的HTML内容（包含换行、未转义的引号、重音特殊字符）直接裸插入JS代码，打断JS字符串结构，触发语法错误
2. 拼接下拉菜单内容时，在变量两侧额外包裹了单引号，会导致最终渲染的DOM出现多余字符
3. 初始出现NaN是JS语法被打断后，后续执行逻辑拿到非预期的非数值类型触发的连锁报错

不要在JS字符串拼接位置内嵌服务端输出逻辑，提前将PHP生成的内容通过JSON转义为合法JS字符串，再做DOM拼接，修复后代码如下：

// 服务端渲染阶段提前生成合法JS字符串，自动处理所有特殊字符、引号、换行转义
const activityOptions = @json(
    App\Models\Activity::getOptionsForMail()->map(function($name,$id){
        return "<a class='dropdown-item btn-act-".$id."' href='javascript:sendComments(".$id.");'>".$name."</a>";
    })->implode('')
);

function activateButtonSend(action){
    let addButton = "";
    if (action === true) {
        // 用模板字符串替代多行反斜杠拼接，减少语法错误
        addButton = `<div class="f-flex float-right" id="dropdown-activities">
                        <button id="content-message" style="display: none" type="button" class="btn btn-lg iq-bg-primary-abs dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Guardar
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">${activityOptions}</div>
                    </div>`;
    } else {
        addButton = '<button type="submit" id="content-message" style="display: none" class="btn iq-bg-primary-abs btn-lg float-right action-button-submit">Guardar</button>';
    }

    $('#type_buttons').html(addButton);
}

关键修复点 #

• 移除JS赋值语句中间内嵌的@php块，避免服务端输出内容直接破坏JS语法
• 用Blade自带的@json指令处理服务端输出到JS的内容，自动完成所有特殊字符、引号、重音符号、换行的转义，从根源解决token语法错误
• 去掉拼接菜单内容时多余的两侧单引号，避免DOM出现冗余字符
• 用ES6模板字符串替代传统多行字符串反斜杠续行写法，降低拼接出错概率
• JS语法修复后，连锁触发的NaN报错会同步消失

开发注意：所有PHP/Blade输出到前端JS环境的变量，必须经过JSON转义处理，禁止直接把echo的HTML内容裸插到JS代码中。

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