Question

我有一个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引擎，其中要点击的两个函数定义为

@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"

现在，当我点击Submit时，api返回一些文本，并且将其定向到仅显示文本的新页面。我希望它保留在同一页面中，并在HTML中显示error_bar或success_bar div，而不是将其重定向到新页面。是否可以实现此效果而无需呈现模板或创建新的静态html页面？

Answer 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）。

如何将烧瓶输出返回到相同的html页面

1 个答案: