[已解决]Flask相关问题

player-none · 发表于 7 天前

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我想做一个 Flask 程序，目前打算实现以下基本功能：

html页面有输入框，能自由编辑内容
点击按钮后，输入内容被发送到服务器那边，服务器处理内容

问题：输入内容怎么被发送到服务器那边？

我试过用 ?action=xxx&msg=xxx 的方式，可是这样的问题 URL 太长了，而且搞起来也不方便，还要跳转。。。我的思路是：js获取内容->跳转->flask处理->再次跳转，这样很麻烦，不适合需要大量重复的情景

有没有更好的方法，直接发到服务器那里？

最佳答案

月排行榜 / 总排行榜

FishC

7 天前

问题：输入内容怎么被发送到服务器那边？

推荐使用 AJAX（异步请求） + Flask路由 实现无刷新提交，步骤如下：

1. HTML页面（关键代码）

<form id="myForm">
<input type="text" name="content" id="inputBox">
<button type="button" onclick="submitForm()">提交</button>
</form>
<div id="result"></div>
<script>
function submitForm() {
// 获取输入内容
let content = document.getElementById('inputBox').value;
// 发送POST请求
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ content: content })
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = data.message;
});
}
</script>

复制代码

2. Flask后端代码

from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def handle_submit():
content = request.json.get('content')
# 这里添加你的处理逻辑（例如保存到数据库）
return jsonify({'message': f'成功收到内容：{content}'})
if __name__ == '__main__':
app.run(debug=True)

复制代码

优势说明

无页面跳转：通过 fetch 发送异步请求
数据格式灵活：使用 JSON 格式传输复杂数据
实时反馈：通过 .then() 接收服务器响应并更新页面

注意事项

如果使用传统表单提交，在路由中改用 request.form.get('字段名')
跨域请求需配置 CORS，但本例因前后端同源无需处理

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 7 天前

问题：输入内容怎么被发送到服务器那边？

推荐使用 AJAX（异步请求） + Flask路由 实现无刷新提交，步骤如下：

1. HTML页面（关键代码）

<form id="myForm">
<input type="text" name="content" id="inputBox">
<button type="button" onclick="submitForm()">提交</button>
</form>
<div id="result"></div>
<script>
function submitForm() {
// 获取输入内容
let content = document.getElementById('inputBox').value;
// 发送POST请求
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ content: content })
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = data.message;
});
}
</script>

复制代码

2. Flask后端代码

from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def handle_submit():
content = request.json.get('content')
# 这里添加你的处理逻辑（例如保存到数据库）
return jsonify({'message': f'成功收到内容：{content}'})
if __name__ == '__main__':
app.run(debug=True)

复制代码

优势说明

无页面跳转：通过 fetch 发送异步请求
数据格式灵活：使用 JSON 格式传输复杂数据
实时反馈：通过 .then() 接收服务器响应并更新页面

注意事项

如果使用传统表单提交，在路由中改用 request.form.get('字段名')
跨域请求需配置 CORS，但本例因前后端同源无需处理

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册