python - 如何将烧瓶输出返回到同一个html页面
问题描述
我有一个 html 文件,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Robots Uploader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="content">
<section class="module w100P">
<div id="error_bar" style = "display:none" class="message-bar error">
<p><span class="icon">Error:</span> Uh-oh, something broke! <a href="#" class="btn close">Close</a></p>
</div>
<div id="success_bar" style="display:none" class="message-bar success">
<p><span class="icon">Success:</span> Your changes have been made. <a href="#" class="btn close">Close</a></p>
</div>
<div class="module-inner">
<h3>DailyHunt Robots Uploader</h3>
<div class="module-content frm">
<form action="http://localhost:5000/uploadFile" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>
<select name ="domain">
<option selected>Select Domain</option>
<option value="m">m</option>
<option value="www">www/option>
</select>
</td>
<td>
<input type="file" name="robots" accept='robots.txt'>
<button type="submit">Upload</button>
</td>
</tr>
</table>
</form>
<form action="http://localhost:5000/uploadApk" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>
Enter APK you want to upload:
</td>
<td>
<input type="file" name="apk">
<button type="submit">Upload</button>
</td>
</table>
</form>
</div>
</div>
</section>
</section>
</section>
</body>
</html>
在点击提交时,它会点击烧瓶 api 引擎,其中要点击的 2 个函数定义为
@app.route('/uploadFile', methods=['POST'])
def upload_robots():
domain = request.form.get('domain')
if not domain:
return "Domain does not exist"
f = request.files[ROBOTS_IDENTIFIER]
if f.filename!=ROBOTS_FILE_NAME:
return "Incorrect file name. File name has to be robots.txt"
if domain == 'm':
robots_file_path = ROBOTS_MOBILE_FILE_PATH
elif domain == 'www':
robots_file_path = ROBOTS_WEB_FILE_PATH
else:
return "Domain not recognized"
filename = secure_filename(f.filename)
if os.path.isfile(robots_file_path + ROBOTS_FILE_NAME):
folder_name = datetime.utcfromtimestamp(int(os.path.getmtime(robots_file_path + ROBOTS_FILE_NAME))).strftime('%Y-%m-%d %H:%M:%S')
os.makedirs(robots_file_path + folder_name)
shutil.move(robots_file_path + ROBOTS_FILE_NAME, robots_file_path + folder_name +'/' + ROBOTS_FILE_NAME)
f.save(os.path.join(robots_file_path, ROBOTS_FILE_NAME))
return "file uploaded successfully, This will reflect in prod after the next cron cycle"
@app.route('/uploadApk', methods=['POST'])
def upload_apk():
f = request.files[APK_IDENTIFIER]
if f.filename.split('.')[-1] != 'apk':
return "upload file type must be apk"
filename = secure_filename(f.filename)
fname = '.'.join(f.filename.split('.')[0:-1])
rename = False
while os.path.isfile(APK_FILE_PATH + fname + '.apk'):
rename = True
fname += '_'
if rename:
shutil.move(APK_FILE_PATH + f.filename, APK_FILE_PATH + fname + '.apk')
f.save(os.path.join(APK_FILE_PATH, filename))
return "APK uploaded successfully"
现在,当我点击提交时,api 返回一些文本,它被定向到一个新页面,只呈现文本。我希望它保留在同一页面中并在 html 中显示error_bar
或success_bar
div,而不是将其重定向到新页面。是否可以在不渲染模板或创建新的静态 html 页面的情况下实现这一点?
解决方案
假设您的当前页面是:index.html。
我想了两种解决方法。
第一种方式,在向您的 API 发出请求后,只需再次 render_template index.html,包括额外数据(error=True/False,message=...),并且您已更新 index.html 以在收到额外数据时检查条件显示错误/成功消息。
=> 这样,你应该修改模板并使用Flask的render_template。我更喜欢这种方式,因为可以控制模板(index.html),它只需要小的更新。
第二种方式,使用AJAX(XHR)发出请求,当点击提交按钮时,您会阻止默认的表单提交并使用AJAX请求,然后接收响应并显示消息。AJAX 脚本可以保留在 index.html 或 index.html 可以找到的另一个 *.js 中。
=> 通过这种方式,您正在以非 Flask 依赖的方式工作,通过使用 Ajax,您可以使用一点 Javascript 发出请求并修改文档 (index.html)。
推荐阅读
- go - GC 开始时的堆大小、GC 结束时的堆大小和 gctrace=1 中的活动堆数代表什么?
- eclipse - 右键单击时将 popupMenus 条目添加为新类别中的子条目
- mysql - 合并两个 MySQL 结果列,其中一列或另一列不为空
- c++ - 运算符的关联性在表达式评估期间如何工作?
- python - 通过 pyodbc 查询 Access 数据库有时可以正常工作,但有时会出现连接错误
- javascript - xmlDoc.getElementsByTagName - 多个相同的标签名称,只从某个父级获得一个?
- python - 谁能帮我解决这个 PyCharm 和 Import Modular 错误?
- asp.net-core - 如何在 asp.net 核心日志记录和应用程序洞察中记录 json
- javascript - 如何使用 cypress 视口刷新重新加载
- powershell - Powershell 将 CSV 数据输出到多行而不是单行