LINUX.ORG.RU

Flask , AJAX Вернуть данные формы на туже страницу.

 , ,


0

1

Хочу вывести результаты ввода формы на тот же темплейт , не перегружая страницу. Я долго мучался, прежде чем написать сюда. Частично оно даже работает, но есть вопросы и они внизу под кодом.

@app.route('/', methods= ["GET", "POST"])
def homepage():
    form = LoginForm()
    if request.method == 'POST':
        story = request.form.get('story')
        username = request.form.get('username')
        if story:
            result = story + username
            return jsonify(result=result)
        else:
            return jsonify(result='Input needed')

    return render_template('return.html', form=form)
class LoginForm(FlaskForm):

    username = StringField('username')

<body>
        <div class='container'>
            <form>


                    <div class="col-md-3">
                            <div class="form-group">
                                {{ form.username.label }}
                                {{ form.username(class_="form-control") }}
                            </div>
                    </div>


                <input class="form-control" id="story" name="story" type="text" value="">
                <br>
                <p>{{ form.submit(class_="btn btn-primary") }}</p>
                <a href=# id=submit><button class='btn btn-primary'>Submit</button></a>
            </form>
            <br>
            <p><h2 align='center'>Result:</h2><h2 id=result align='center'></h2></p>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type=text/javascript>
            $(function() {
              $('a#submit').bind('click', function() {
                $.post('/', {
                  story: $('input[name="story"]').val(),
                  username: $('input[name="username"]').val(),
                }, function(data) {
                  $('#result').text(data.result);
                });
                return false;
              });
            });
        </script>

Два вопроса.

1. При генерации html у меня соответственно две кнопки

<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Submit"></p>

и

                <a href=# id=submit><button class='btn btn-primary'>Submit</button></a>

Вторая кнопка работает нормально и по ней ajax возвращает данные формы на ту же страницу. А первая нет. Первая выдает

«GET /?username=&story=&submit=Submit HTTP/1.1» 200 те GET запрос.

но если в роуте вместо if request.method == 'POST', я использую if form.validate_on_submit(): , то вторая тоже перестает работать. Хотелось бы использовать form.validate_on_submit(): и отдавать ввод формы обратно на тот же темплейт.

Второй вопрос. Мне обязательно надо перечислять все переменные в ajax скрипте? может я могу как-то забрать их все сразу вместе?

Этот тестовый код, который я вымучил за пару дней. Может быть можно сделать все красивее , я был бы очень рад как пояснениям, так и правильным примерам к задаче.

★★★★

Ответ на: комментарий от gruy

Не то, чтобы я не хочу учиться, но пока не хочу лезть в css/ajax/get/post и прочее. Я хочу питон. Остальное буду смотреть позже. Пишу всякие автоматизации. Честно говоря, мне этот возврат на тот же темплейт в конце не нужен будет, но для отладки удобно. И вот я споткнулся.

Пример по ссылке не дает ответа при моем уровне знаний.

constin ★★★★
() автор топика
Ответ на: комментарий от constin

Тогда не заморачивайся аяксом, только будешь время терять (если, конечно, не хочешь еще фронтом вплотную заниматься).

gruy ★★★★★
()
Ответ на: комментарий от gruy

Ок, но черт, ведь почти работает..

моя догадка о том, что $('a#submit').bind('click', function() , реагирует только на тэг <a href= из-за $('a# правильная? те a# для тега <a ?

constin ★★★★
() автор топика
Ответ на: комментарий от constin

Правильная

$('input#submit').bind

так работает все. теперь осталось захватить весь выхлоп одним словарем, не прописывая переменные.

constin ★★★★
() автор топика

Начиная с jQuery 3.0, .bind() устарел

- $.post('/', {
+ $.post(window.location.pathname, {

maxim2
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.