使用python代码、JavaScript代码和html代码实现以下功能:python flask后端实现求和函数,JavaScript前端处理html界面传回的两个整数,求和后在html界面显示
时间: 2024-10-09 15:01:31 浏览: 27
首先,我们分三个部分来实现这个功能:
1. **Python Flask 后端** - 我们将创建一个简单的Flask应用,用于接收前端发送过来的请求并计算和返回结果。
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/sum', methods=['POST'])
def sum_numbers():
data = request.get_json() # 接收前端发送的数据
if 'numbers' in data and isinstance(data['numbers'], list) and all(isinstance(num, int) for num in data['numbers']):
total = sum(data['numbers']) # 计算和
return jsonify({'result': total}) # 返回JSON响应
else:
return jsonify({'error': 'Invalid input'}), 400 # 输入错误
if __name__ == '__main__':
app.run(debug=True)
```
2. **JavaScript 前端** - 在HTML文件中,我们将使用`fetch`来向后端API发送请求,并在页面上显示结果。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sum Calculator</title>
<script>
function calculateSum() {
const numbersInput = document.getElementById('numbers');
const resultDiv = document.getElementById('result');
fetch('/sum', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ numbers: [Number(numbersInput.value.split(',').map(n => parseInt(n)))] }) // 将输入字符串转换为整数数组
})
.then(response => response.json())
.then(data => {
if ('error' in data) {
resultDiv.textContent = "Error: " + data.error;
} else {
resultDiv.textContent = "The sum is: " + data.result;
}
})
.catch(error => console.error('Error:', error));
}
</script>
</head>
<body>
<input type="text" id="numbers" placeholder="Enter numbers separated by commas">
<button onclick="calculateSum()">Calculate Sum</button>
<div id="result"></div>
</body>
</html>
```
当你在输入框里输入两个数字,点击“Calculate Sum”按钮,会计算它们的和并在下方结果显示。
阅读全文