Вернуть сообщение об ошибке из колбы в ту же форму в модальном режиме

HTML: у меня есть модальная форма регистрации (index.html).

JS: данные формы отправляются в функцию колбы Python: / signup_user

  $(function () {
$('#signupButton').click(function () {
  $.ajax({
    url: '/signup_user',
    method: 'POST',
    data: $('#signupForm').serialize()
  })
    .done(function (data) {
      console.log('success callback 1', data)
    })
    .fail(function (xhr) {
      console.log('error callback 1', xhr);
    })
  })
}); 

Python / Flask:

@app.route('/signup_user', methods=['POST'])
def signup_user():
#Request data from form and send to database
#Check that username isn't already taken
#if the username is not already taken  
    if new_user:
        users.insert_one(new_user)
        message = "Success"
        return message
#else if ussername is taken, send message to user viewable in the modal
    else:
        message = "Failure"
        return message
return redirect(url_for('index'))

Я не могу понять, как заставить функцию фляги возвращать сообщение «Ошибка» в форму в модальном окне, чтобы пользователь мог изменить имя пользователя.

Прямо сейчас, как только я нажимаю кнопку отправки, форма / модальное окно исчезает, а сообщение «Ошибка» обновляет всю страницу до пустой страницы со словом «Ошибка». Как мне вернуть сообщение об ошибке для отображения в форме / модальном окне?

Каждый ответ ниже по-прежнему имеет модальное окно, которое исчезает после нажатия кнопки и текста «Успешно» или «Неудача», перезаписывающего экран.

Sonnerz 13.09.2018 20:03
0
1
2 143
4

Ответы 4

Думаю, проблема в том, что у вас в конце скрипта signup_user есть функция перенаправления. Вот почему страница обновляется и показывает сообщение, возвращаемое скриптом.

Итак, удалите эту строку:

return redirect(url_for('index'))

И обновите свой код Ajax следующим образом:

$(function () {
 $('#signupButton').click(function () {
  $.ajax({
    type: "post",
    url: "postride.php",
    data:dataString,
    success: function (data) {
        $('#signupMessages').html(data);
    }
 });
});

Python / Flask:

@app.route('/signup_user', methods=['POST'])
def signup_user():
#Request data from form and send to database
#Check that username isn't already taken
#if the username is not already taken  
if new_user:
    users.insert_one(new_user)
    message = "Success"
    return message
#else if ussername is taken, send message to user viewable in the modal
else:
    message = "Failure"
    return message

Сообщите мне, если это сработает.

Я удалил: return redirect (url_for ('index')) и заменил на return. Я создал div в форме для сообщения: $ ("# signupMessages"). Html (data); Ни то, ни другое не решил проблему

Sonnerz 13.09.2018 18:51

Кажется, это правильный синтаксис для AJAX согласно https://codehandbook.org/python-flask-jquery-ajax-post/

        $.ajax({
            url: '/signup_user',
            data: $('#signupForm').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });

Вы также можете попробовать getJSON для сокращения:

        $.getJSON('/signup_user',
            $('#signupForm').serialize(),
            function(res) {
            console.log(res)
        });

ОБНОВЛЕНО: На собственном опыте я обнаружил, что methods=['POST'] не нужен для вызовов ajax в @ app.route flask. Я могу ошибаться.

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

import pdb; pdb.set_trace()

(только в начале функции)

так будет так:

@app.route('/signup_user', methods=['POST'])
def signup_user():
#Request data from form and send to database
#Check that username isn't already taken
#if the username is not already taken  

import pdb; pdb.set_trace()
if new_user:
    users.insert_one(new_user)
    message = "Success"
    return message
#else if ussername is taken, send message to user viewable in the modal
else:
    message = "Failure"
    return message

Итак, когда вы, наконец, запустите код и отправите запрос, вы должны увидеть консоль с запущенным сервером python, который остановлен подобным образом с этим -> (pdb) (если вы не видите, что "(pdb)" в консоли, просто нажмите Enter, чтобы увидеть, появляется ли он)

если не остановлен, значит, вы просто не входите в функцию,

в противном случае вы находитесь в функции, хорошо ... теперь давайте взглянем и немного отлаживаем, первое, что вы могли бы проверить, это то, можем ли мы ввести оператор else ... вы можете передавать строку за строкой, просто вводя букву " n "и нажмите Enter, так что продолжайте, пока не войдете в часть else, если это так, то вы фактически вернете текст" Failure "

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

некоторые другие варианты, которые вы должны проверить:

.- попробуйте передать параметры функции ajax, например dataType: 'json'

.- попробуйте увидеть, нужно ли вам включить CORS для приложения python.

.- сохранить отладку построчно

Удачи этому приятелю

Я получил это после долгих испытаний; мой вызов ajax необходим:

event.preventDefault();

Кроме того, моей функции python нужно было изменить перенаправление на возврат. Итак, Архитектор был правильным.

Я также заметил, что мой не отображается в исходном виде страницы, поэтому, возможно, возникла проблема с кешированием.

Все участники в чем-то были правы. Просто у меня было несколько неправильных вещей.

Другие вопросы по теме