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'作为键来索引此词典，但它看起来像是＆＃39; m_data＆＃39;只是JavaScript变量的名称，实际上并不是表单数据的键。如果'm_data'不是有效密钥，则会引发异常。

引用MultiDicts上的Werkzeug documentation：

＆＃34;从Werkzeug 0.3开始，这个类提出的KeyError也是 BadRequest HTTP异常的子类，将为其呈现页面如果遇到HTTP异常的全部捕获，则会出现400 BAD REQUEST。＆＃34;

要帮助调试此路由，可以将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测试服务器，则检查控制台）。

在向Flask端点的AJAX Post请求期间理解400错误

1 个答案: