将烧瓶中的错误消息返回到模态中的相同形式

Question

HTML：我在模态中有一个“注册”表单（index.html）

JS：表单数据发布到python flask函数：/ 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 /瓶：

@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'))

我无法弄清楚如何让flask函数将“Failure”消息返回到模态中的表单，以便用户可以更改用户名。

现在，只要我单击提交按钮，表单/模式就会消失，“失败”消息会将整个页面刷新到一个单词“失败”的空白页面。如何将错误消息恢复为以/ modal格式显示？

Answer 1

我认为问题是你最后在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 /瓶：

@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

让我知道这个是否奏效。

Answer 2

根据https://codehandbook.org/python-flask-jquery-ajax-post/，这似乎是AJAX的正确语法

        $.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)
        });

更新：在我自己的使用中，我发现在flask的@ app.route中调用ajax不需要methods=['POST']。我错了。

Answer 3

我要做的是首先检查我们是否到达函数，在函数上有一个断点，为此你可以使用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'

.-试着看看你是否需要为python app启用CORS

.-逐行调试

祝那个好朋友好运

Answer 4

经过多次测试，我得到了这个工作;我的ajax电话需要：

event.preventDefault();

此外，我的python函数需要将重定向更改为返回。所以Architect是正确的。

我还注意到我没有出现在页面的源视图中，因此可能存在一些缓存问题。

所有贡献者在某种程度上都是正确的。只是我有几个不同的错误。