Как вернуть колбу на ту же HTML-страницу - PullRequest
Новая
       17

Как вернуть колбу на ту же HTML-страницу

0 голосов
/ 25 октября 2018

У меня есть 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 возвращает некоторые тексты, и он направляется на новую страницу с отображенным текстом.Я хотел бы, чтобы это оставалось на той же странице и отображало элементы error_bar или success_bar в html, а не перенаправлялось на новую страницу.Возможно ли достичь этого без рендеринга шаблона или создания новой статической HTML-страницы?

1 Ответ

0 голосов
/ 25 октября 2018

Давайте предположим, что ваша текущая страница: index.html.

Я подумал о двух способах решения.

  • Первый способ, после отправки запроса на вашAPI, просто выполните render_template index.html еще раз, включая дополнительные данные (error = True / False, message = ...), и вы обновили свой index.html, чтобы проверить состояние при получении дополнительных данных для отображения сообщения об ошибке / успехе.

    => Таким образом, вы должны изменить шаблон и использовать render_template Flask.Я предпочитаю этот способ из-за наличия контроля над шаблоном (index.html), он просто нуждается в небольшом обновлении.

  • Второй способ, сделать запрос с использованием AJAX (XHR), когда нажмите кнопку отправитьКнопка, вы запрещаете отправку формы по умолчанию и используете AJAX для запроса, затем получаете ответ и отображаете сообщение.Сценарий AJAX может находиться в index.html или другом * .js, где может находиться ваш index.html.

    => Таким образом, вы работаете не зависящим от Flask способом, используя Ajax, вы делаете запроси измените документ (index.html), используя небольшой Javascript.

...