如何在Blade页JavaScript中正确使用控制器传递的PHP数组

两种写法失效主要是两个核心问题：

• 类型不匹配：PHP传过来的$ids数组元素都是整型，转成JS数组后元素也是数字类型，但输入框通过.value拿到的内容是字符串类型，Array.includes()是严格相等判断，数字和字符串值就算看起来一样也会判定为不相等，比如100485 === "100485"返回false。
• 逻辑缺失：既没有阻止表单默认提交行为（校验不通过时表单还是会提交空地址），写法2直接把JSON内容塞到单引号里还容易因为转义字符触发JS语法错误，另外json_encode输出的内容本身就是合法JS字面量，没必要额外套一层JSON.parse。

1. 先调整表单的onsubmit属性，传入事件对象，方便后续拦截默认提交：

<form action="" id="your_form" onsubmit="yourFunction(event)">
    <div class="row">
        <div class="col-lg-2">
            <input id="coffee-submit" class="btn btn-primary mt-35" type="submit" value="detail">
        </div>
    </div>
    <br>
</form>

2. 替换原有yourFunction逻辑，用Blade自带的@json指令安全输出后端传的ID数组，统一数据类型后再做校验：

// 直接通过@json指令输出允许访问的ID数组，自动处理转义，无语法风险
const allowedIds = @json($ids);

function yourFunction(e) {
    // 拦截表单默认提交行为
    e.preventDefault();

    // 获取输入框内容，自动去除前后空格，避免用户误输入空格导致校验失败
    const idInput = document.querySelector('input[name="id"]');
    const inputId = idInput.value.trim();

    // 把输入值转为数字类型，和数组内元素类型保持一致后再做匹配
    if (allowedIds.includes(Number(inputId))) {
        const form = document.getElementById("your_form");
        form.action = `http://localhost:8000/admin/${inputId}/orders`;
        // 校验通过手动提交表单
        form.submit();
    } else {
        // 校验不通过时的提示，可按需替换为自己的提示逻辑
        alert("输入的ID不存在，请核对后再试");
        idInput.focus();
        return false;
    }
}

补充说明：如果不想改onsubmit传参，也可以直接在JS里给表单绑定提交事件，不用写在行内属性里，逻辑分离更易维护。

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