通过html页面向后端传递JSON数据
- 前端：HTML、JavaScript
- 后端：FLask
- 前端发送JSON格式数据，后端接收数据并响应
代码实现
前端
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="{{ url_for("static", filename="jquery.js") }}"></script>
</head>
<body>
<br>
<h2 style="text-align: center;">测试数据传递</h2>
<div style="text-align: center;">
<br>
<input id="topic" type="text" placeholder="请输入主题"><br><br>
<input id="payload" type="text" placeholder="请输入内容"><br><br>
<button onclick="sendData()">发送</button>
</div>
<script>
function sendData() {
// 获取输入框中的数据
const topic = document.getElementById('topic').value;
const payload = document.getElementById('payload').value;
console.log(topic,payload);
// 将数据转换为json格式
const jsonData = JSON.stringify({"topic":topic,"payload":payload})
console.log("本次提交数据：",jsonData);
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 设置POST请求，并指定后端接收数据的URL
xhr.open("POST", "/publish", true);
// 设置请求头，指定发送的数据类型为JSON
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);
} else if (xhr.readyState === 4) {
console.error('请求失败，服务器无响应');
}
};
// 发送请求，并将JSON数据作为请求体发送给后端
xhr.send(jsonData);
}
</script>
</body>
</html>
Flask后端
python
复制代码
@app.route('/publish', methods=['POST'])
def publish_message():
""" 获取前端页面提交的数据 """
# 格式化数据
request_data = request.get_json()
print(request_data)
# 响应
return jsonify({"code": "200", 'status': 'success'})
if __name__ == '__main__':
app.debug = True
app.run()
效果
