python前后端交互
时间: 2023-06-29 13:17:29 浏览: 102
在 Python 中,我们可以使用 Flask、Django 等 Web 框架来实现后端服务,与前端进行交互。以下是使用 Flask 实现前后端交互的简单示例:
1. 安装 Flask
在命令行中输入以下命令进行安装:
```
pip install flask
```
2. 编写后端代码
在 Python 中编写 Flask 后端代码,实现一个简单的接口:
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/api/add', methods=['POST'])
def add():
data = request.get_json()
num1 = data['num1']
num2 = data['num2']
result = num1 + num2
return jsonify({'result': result})
if __name__ == '__main__':
app.run(debug=True)
```
在这个示例中,我们创建了一个 `/api/add` 的接口,接收一个 POST 请求,从请求体中获取 `num1` 和 `num2` 两个参数,将它们相加得到结果,并将结果封装成 JSON 格式返回。
3. 编写前端代码
在 HTML 中编写前端代码,实现一个简单的表单:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Addition</title>
</head>
<body>
<form id="add-form">
<input type="number" name="num1">
<span>+</span>
<input type="number" name="num2">
<button type="submit">=</button>
<input type="number" name="result" readonly>
</form>
</body>
</html>
```
在表单中,我们定义了两个输入框和一个提交按钮,以及一个只读的输入框用于显示计算结果。
4. 编写 JavaScript 代码
在 JavaScript 中编写前端代码,实现将表单数据发送给后端并将结果显示在页面上:
```javascript
const form = document.getElementById('add-form')
form.addEventListener('submit', async (event) => {
event.preventDefault()
const num1 = parseInt(form['num1'].value)
const num2 = parseInt(form['num2'].value)
const response = await fetch('/api/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({num1, num2})
})
const data = await response.json()
form['result'].value = data.result
})
```
在这段代码中,我们监听了表单的提交事件,获取了 `num1` 和 `num2` 的值,并使用 `fetch` 函数将这些数据以 JSON 格式发送给后端。然后,我们从响应中获取了计算结果,并将它显示在表单的结果输入框中。
至此,我们就完成了一个简单的前后端交互示例。用户输入两个数值,点击提交按钮后,JavaScript 代码将这两个数值发送给后端,后端将它们相加后返回结果,JavaScript 代码将结果显示在页面上。
阅读全文