尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

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

thinkphp6后台数组,传到前端js处理
📅 发布时间:2026/6/19 11:34:37
结合 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, '&amp;').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. 转义内容防止XSSconst escapedTitle = escapeHtml(store.title);html += `<option value="${escapedTitle}" ${isSelected}>${escapedTitle}${store.id}</option>`;
});html += '</select>';
html += '</div>';

注意事项

  • 确保 TP6 控制器中传递的$stores是数组格式(而非对象),若为对象可通过toArray()转换(如模型查询结果:$storeList = StoreModel::select()->toArray(););

相关新闻

  • 2025年热门的液压油过滤机/过滤机厂家推荐及选购指南
  • 2025年质量好的刮板结晶蒸发器厂家推荐及采购参考
  • 2025年中国十大水性开油水生产商推荐:值得推荐的水性开油水

最新新闻

  • 嵌入式ADC队列化设计:QADC扫描模式与边界条件深度解析
  • 终极网盘直链下载助手:免费突破九大网盘限速的完整指南
  • 2026年6月市面上正规的风淋室服务商推荐,风淋室/净化彩钢板/电解钢板/手工净化板/机制净化板,风淋室厂家哪家靠谱 - 品牌推荐师
  • 深聊专业的 PPH 槽罐怎么选?纽英其为你支招 - 工业品牌热点
  • 口碑好的智能水务品牌推荐与分析 - myqiye
  • ARM Cortex-M0+微控制器低功耗设计:从架构到实战的嵌入式系统优化

日新闻

  • 信任的进化:技术实现详解——如何用JavaScript构建博弈论模拟器
  • Terrakube自定义工作流:如何集成OPA、Infracost等工具扩展IaC能力
  • grunt-concurrent快速入门:5分钟学会并行运行Grunt任务

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号