在向 Flask 端点发送 AJAX 请求期间了解 400 错误

Question

在使用 JQuery AJAX POST 请求将表单数据和附件发送到 Flask 端点时，试图了解我在这里做错了什么。

我仍在构建的基本 Flask 视图如下所示：

@main.route('/videoupload', methods=['GET','POST'])
def videoupload():
    if request.method == 'POST':
        ajaxpost = request.form['m_data']
        print(ajaxpost)
    return render_template('videoupload.html')

表单和附件的 JQuery 如下所示：

$("#submit_btn").click(function() {  
        var proceed = true;

        if(proceed) //everything looks good! proceed...
        {
            //data to be sent to server
            var m_data = new FormData();    
            m_data.append( 'video_title', $('input[name=videoTitle]').val());
            m_data.append( 'video_description', $('input[name=videoDescription]').val());
            m_data.append( 'video_tags', $('input[name=videoTags]').val());
            m_data.append( 'file_attach', $('input[name=file_attach]')[0].files[0]);
            //instead of $.post() we are using $.ajax()
            //that's because $.ajax() has more options and flexibly.
            $.ajax({
              url: '/videoupload',
              data: m_data,
              processData: false,
              contentType: false,
              type: 'POST',
                  //dataType:'json',
              datatype:'json',
              success: function(response){
                 //load json data from server and output message     
                if(response.type == 'error'){ //load json data from server and output message     
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                }
                $("#videoform #form_results").hide().html(output).slideDown();
              }
            });        
        }
    });

使用 Firebug 和 Net 窗口，我可以确认在表单字段和附件中输入的数据正在附加到 FormData() 对象。

当用户单击提交按钮时，我在控制台中收到以下错误：

> POST http://127.0.0.1:8000/videoupload 400 (BAD REQUEST)
send @ jquery.js:9664
m.extend.ajax @ jquery.js:9215
(anonymous function) @ videoupload:137
n.event.dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

Navigated to http://127.0.0.1:8000/videoupload?videoTitle=asdf&videoDescription=asdfasdfasdfasdfasdf&videoTags=ZcZXcZXcZXcZXC&file_attach=ScreenCaptureProject1.mp4

在运行 Flask 应用程序（使用 Gunicorn）以调试模式运行的终端窗口中，没有出现错误：

[2016-05-20 00:18:21 -0400] [27033] [DEBUG] POST /videoupload
POST CALLED
[2016-05-20 00:18:24 -0400] [27033] [DEBUG] GET /videoupload

似乎 AJAX 正在使用 POST 请求 ping Flask 视图。我是否在 Flask 视图中错误地处理了表单？ Flask 不喜欢的 JQuery AJAX POST 请求是否有问题？

Answer 1

request.form 是一个MultiDict，带有接收到的表单数据的键值对。

您正在尝试使用字符串 'm_data' 作为键来索引此字典，但看起来“m_data”只是您的 JavaScript 变量的名称，实际上并不是表单数据的键。如果'm_data' 不是有效的密钥，则会引发异常。

引用 MultiDicts 上的Werkzeug documentation：

"从 Werkzeug 0.3 开始，这个类引发的 KeyError 也是 BadRequest HTTP 异常的子类，将呈现一个页面 如果在 HTTP 异常的全部捕获中捕获 400 BAD REQUEST。"

为了帮助调试这条路线，您可以将您的 python 代码包装在一个 try-except 块中：

@main.route('/videoupload', methods=['GET','POST'])
def videoupload():
    if request.method == 'POST':
        try:
            [your code]
        except Exception, e:
            print e
    return render_template('videoupload.html')

然后您可以检查错误日志中是否出现KeyError（如果您在本地运行 Flask 测试服务器，则可以在控制台中）。