前端如何安全接收并渲染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自动化做基坑渗流分析？流程和关键设置有哪些？