请生成一段代码,实现web与后端的数据交互
时间: 2024-05-05 08:17:56 浏览: 7
好的,以下是一个简单的示例代码:
在前端页面中添加一个表单,用于输入数据并提交到后端:
```html
<form>
<label for="data">输入数据:</label>
<input type="text" id="data" name="data">
<button type="button" onclick="sendData()">提交</button>
</form>
```
在JavaScript中编写发送数据的函数,使用AJAX技术将数据发送到后端,并接收后端返回的数据:
```javascript
function sendData() {
var data = document.getElementById("data").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/submit-data", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 处理后端返回的数据
console.log(response);
}
};
var requestBody = JSON.stringify({data: data});
xhr.send(requestBody);
}
```
在后端编写一个接收数据并返回处理结果的路由处理函数:
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/api/submit-data', methods=['POST'])
def submit_data():
data = request.json['data']
# 在这里处理数据
result = data.upper() # 将数据转换为大写字母
return jsonify({'result': result})
if __name__ == '__main__':
app.run()
```
以上是一个简单的实现数据交互的示例代码,具体实现方式可以根据实际需求进行调整。