如何将烧瓶输出返回到同一个html页面答案

【问题标题】：How to return flask output to the same html page如何将烧瓶输出返回到同一个html页面
【发布时间】：2018-10-25 08:31:08
【问题描述】：

我有一个 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>

点击提交时，它会点击flask 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 页面的情况下实现这一点？

【问题讨论】：

听起来你需要在这里看看 Ajax。看这里：flask.pocoo.org/docs/0.12/patterns/jquery
同一页是指索引还是呈现所有表单所在的html文件的第一页..？

标签： python html flask onsubmit

【解决方案1】：

假设您的当前页面是：index.html。

我想了两种解决方法。

第一种方式，向您的 API 发出请求后，只需再次 render_template index.html，包括额外数据（错误=True/False，消息=...），并且您已更新 index.html 以在收到额外数据以显示错误时检查条件/成功消息。

=> 这样，你应该修改模板并使用Flask的render_template。我更喜欢这种方式，因为可以控制模板（index.html），它只需要小更新。
第二种方式，使用AJAX（XHR）发出请求，当点击提交按钮时，您会阻止默认的表单提交并使用AJAX请求，然后接收响应并显示消息。 AJAX 脚本可以保留在 index.html 或您的 index.html 可以找到的其他 *.js 中。

=>通过这种方式，您以不依赖 Flask 的方式工作，通过使用 Ajax，您可以使用一点 Javascript 来发出请求并修改文档 (index.html)。

【讨论】：