如何在JavaScript中使用Laravel从数据库查询到的弹窗配置数据

错误原因说明 #

你之前的写法存在两个核心问题：

• 循环内仅声明了Swal.fire的开头部分，未闭合语法结构，直接导致JS语法报错
• 未处理多弹窗场景的逻辑，循环时会连续触发多次弹窗调用，最终仅会渲染最后一条数据

实现步骤 #

1. 控制器传递数据 #

首先在对应控制器中查询弹窗数据并传递到视图：

// 引入弹窗Model
use App\Popup;

public function index()
{
    // 可根据业务需求加筛选条件，比如按datep字段判断生效时间
    $popups = Popup::latest()->get();
    return view('你对应的视图名称', compact('popups'));
}

2. Blade视图JS代码实现 #

场景1：每次仅显示最新1条弹窗（最常用场景）

直接将集合转成JSON格式传递给JS变量，避免拼接字符串的语法问题：

<script>
$(document).ready(function(){
    let popup_shown = false;
    const cookies = document.cookie.split('; ');
    for(let i=0; i<cookies.length; i++){
        const cookie = cookies[i].split('=');
        if(cookie[0] === 'oly12_reg_ext2_popup_shown'){
            popup_shown = true;
        }
    }
    // 判断弹窗未展示且存在有效弹窗数据
    if(!popup_shown && @json($popups->isNotEmpty())){
        // 直接取最新的第一条弹窗数据
        const popup = @json($popups->first());
        Swal.fire({
            html: `<a href="${popup.linkp}" target="_blank"><img style="width: 100%;" src="${popup.image_path}" alt="${popup.title}"></a>`,
            showConfirmButton: false
        });
        document.cookie = "oly12_reg_ext2_popup_shown=1; path=/";
    }
});
</script>

如果需要使用Laravel的资源路径辅助函数，可以调整html属性写法：

html: '<a href="{{ $popups->first()->linkp }}" target="_blank"><img style="width: 100%;" src="{{ asset($popups->first()->image_path) }}" alt="{{ $popups->first()->title }}"></a>',

场景2：按顺序展示所有弹窗

如果需要依次展示所有配置的弹窗，可以用JS循环处理：

<script>
$(document).ready(function(){
    let popup_shown = false;
    const cookies = document.cookie.split('; ');
    for(let i=0; i<cookies.length; i++){
        const cookie = cookies[i].split('=');
        if(cookie[0] === 'oly12_reg_ext2_popup_shown'){
            popup_shown = true;
        }
    }
    if(!popup_shown && @json($popups->isNotEmpty())){
        const popups = @json($popups);
        // 按数据库查询顺序依次展示弹窗
        popups.forEach(popup => {
            Swal.fire({
                html: `<a href="${popup.linkp}" target="_blank"><img style="width: 100%;" src="${popup.image_path}" alt="${popup.title}"></a>`,
                showConfirmButton: false
            });
        });
        document.cookie = "oly12_reg_ext2_popup_shown=1; path=/";
    }
});
</script>

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