thinkphp6后台数组,传到前端js处理

结合 ThinkPHP6 框架特性和前端 JS 的规范性、安全性,对代码进行以下改进(包含 TP6 适配、XSS 防护、语法优化、鲁棒性提升等):

1. TP6 端数据传递优化

TP6 中json_encode建议添加JSON_UNESCAPED_UNICODE(避免中文转义)和JSON_HEX_TAG(防止 XSS)参数,确保数据安全传递:
// 控制器中传递数据(示例)
View::assign('stores', $storeList); // $storeList为查询到的店铺列表

// 模板中输出JSON(TP6推荐写法)
var stores = {:json_encode($stores, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG)};

2. 前端 JS 优化(核心改进)

// 1. 鲁棒性校验:确保数据存在且为数组
const stores = {:json_encode($stores, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG)} || [];
let html = '';

// 2. XSS防护工具函数(避免用户输入内容导致XSS)
const escapeHtml = (str) => {
    if (!str) return '';
    return str.replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#039;');
};

// 3. 构建HTML(模板字符串+forEach循环,更简洁安全)
html += '<div>';
html += '<select name="store_id[]" lay-filter="tar_storeId" class="store_id">';

// 用forEach循环(比for...in更安全,避免原型链污染)
stores.forEach(store => {
    // 4. 语义化判断选中状态
    const isSelected = store.id === 2 ? 'selected' : '';
    // 5. 转义内容防止XSS
    const escapedTitle = escapeHtml(store.title);
    
    html += `<option value="${escapedTitle}" ${isSelected}>${escapedTitle}${store.id}</option>`;
});

html += '</select>';
html += '</div>';

注意事项

  • 确保 TP6 控制器中传递的$stores是数组格式(而非对象),若为对象可通过toArray()转换(如模型查询结果:$storeList = StoreModel::select()->toArray(););
posted @ 2025-11-29 12:37  zhang_you_wu  阅读(0)  评论(0)    收藏  举报