Question

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 /烧瓶：

@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”消息返回到模态表单中，以便用户可以更改用户名。

现在，当我单击“提交”按钮时，表单/模式就会消失，并且“失败”消息将整个页面刷新为空白页面，并带有失败字样。如何将错误消息重新显示为表单/模式？

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应用启用CORS

.-逐行保持调试状态

祝你好运

Answer 4

经过大量测试后，我才开始工作。我的ajax通话需要：

event.preventDefault();

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

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

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

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

4 个答案: