前端如何安全接收并渲染Python后端传来的水果列表？有哪些常见坑和优化方案？

### HTML 文件中 JavaScript 接收 Python 的水果列表并显示在多功能消息列表 #### Python 端（使用 Flask 框架） ```python from flask import Flask, render_template import json app = Flask(__name__) @app.route('/') def index(): # 定义水果列表 fruit_list = ['苹果', '香蕉', '橙子', '葡萄'] # 将列表转换为 JSON 字符串传递给前端 return render_template('index.html', fruit_list=json.dumps(fruit_list)) if __name__ == '__main__': app.run(debug=True) ``` #### HTML 端 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水果列表</title> </head> <body> <ul id="fruit-list"></ul> <script> // 接收 Python 传递过来的水果列表 const receivedFruitList = JSON.parse('{{ fruit_list }}'); // 获取列表元素 const fruitListElement = document.getElementById('fruit-list'); // 遍历水果列表并添加到页面 receivedFruitList.forEach(fruit => { const listItem = document.createElement('li'); listItem.textContent = fruit; fruitListElement.appendChild(listItem); }); </script> </body> </html> ``` ### 解决代码潜在问题及优化页面功能 #### 潜在问题及解决方法 - **特殊字符问题**：如果水果列表中包含特殊字符，可能会导致 JSON 解析错误。可以在 Python 端使用 `json.dumps` 时设置 `ensure_ascii=False` 来正确处理非 ASCII 字符。 ```python return render_template('index.html', fruit_list=json.dumps(fruit_list, ensure_ascii=False)) ``` - **安全性问题**：直接将 Python 数据嵌入 HTML 可能存在 XSS 风险。为了避免这种情况，可以使用更安全的方式传递数据，例如通过 AJAX 请求获取数据。 #### 优化页面功能 - **添加搜索功能**：可以在页面上添加一个搜索框，让用户可以搜索特定的水果。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水果列表</title> </head> <body> <input type="text" id="search-input" placeholder="搜索水果"> <ul id="fruit-list"></ul> <script> const receivedFruitList = JSON.parse('{{ fruit_list }}'); const fruitListElement = document.getElementById('fruit-list'); const searchInput = document.getElementById('search-input'); function displayFruits(fruits) { fruitListElement.innerHTML = ''; fruits.forEach(fruit => { const listItem = document.createElement('li'); listItem.textContent = fruit; fruitListElement.appendChild(listItem); }); } displayFruits(receivedFruitList); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); const filteredFruits = receivedFruitList.filter(fruit => fruit.toLowerCase().includes(searchTerm)); displayFruits(filteredFruits); }); </script> </body> </html> ``` - **分页功能**：如果水果列表很长，可以添加分页功能，让用户可以分批次查看水果。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 Plaxis 2D怎么用Python自动化做基坑渗流分析？流程和关键设置有哪些？

目录

前端如何安全接收并渲染Python后端传来的水果列表？有哪些常见坑和优化方案？

Python内容推荐

基于Python的Django-vue在线水果销售系统源码-说明文档.zip

Python基于pygame来实现切水果水果忍者游戏源代码

基于python的在线水果销售系统源码数据库.zip

基于python的在线水果销售系统源码数据库论文.doc

python实现水果忍者小游戏

基于python的在线水果销售系统源码数据库.doc

基于python和Django开发的一个B2C网上蔬果商城系统源码

Python库 | InquirerPy-0.2.2.tar.gz

python游戏源码-01 pygame-games（13个）

pi-subagents基于Python子任务分布式调度框架源码

【Python编程】Python性能剖析与代码优化策略

【Python编程】Python虚拟环境与依赖管理方案

【Python编程】Python迭代器与生成器机制剖析

【Python编程】Python数据类dataclass与attrs库对比

【Python编程】Python并发编程之线程与进程模型

日常文件以及数据库文件-Python智能嗅探-各种文件内容提取-批量解析预览与防错检查

html5游戏源码（水果忍者，切水果）

水果忍着代码

水果忍者源码

切水果手指触摸屏幕特效

Python基础第八章

python面试必备知识点分享.docx

Python面试题及答案共55道.docx

python笔试题(2).docx

Python-100个精选的python陷阱示例每周1个新示例

学生成绩管理系统C++课程设计与实践

别再手动拖拽了！用Lumerical脚本批量创建FDTD仿真结构（附完整代码）

Java邮件解析任务中，如何安全高效地提取HTML邮件内容并避免硬编码、资源泄漏和类型转换异常？

RH公司应收账款管理优化策略研究

新手别慌！用BingPi-M2开发板带你5分钟搞懂Tina Linux SDK目录结构