Fatal编程技术网
  • jquery/
  • 未调用JQuery ajax错误处理程序

未调用JQuery ajax错误处理程序

jquery ajax flask

未调用JQuery ajax错误处理程序,jquery,ajax,flask,Jquery,Ajax,Flask,我试图通过调用jQuery的ajax（）方法将图像上传到flask应用程序中。当文件大小低于允许的最大文件大小时，它可以正常工作。当文件大于允许值时，flask会产生413（实体太大）错误，但在这种情况下，$.ajax（）不会触发任何事件：Safari的调试器显示正在执行请求 以下是我的ajax调用： var formData = new FormData($('#upload-form')[0]); $.ajax({ type: 'POST', url: "/upload_h

我试图通过调用jQuery的ajax（）方法将图像上传到flask应用程序中。当文件大小低于允许的最大文件大小时，它可以正常工作。当文件大于允许值时，flask会产生413（实体太大）错误，但在这种情况下，$.ajax（）不会触发任何事件：Safari的调试器显示正在执行请求

以下是我的ajax调用：

var formData = new FormData($('#upload-form')[0]);

$.ajax({
    type: 'POST',
    url: "/upload_handler/",
    data: formData,
    contentType: false,
    processData: false,
    cache: false,
    dataType: 'json',
    success:function(data, textStatus, jqXHR){
        console.log(data);
        $('#upload-form')[0].reset();
    },
    error: function(data){
        console.log(data);
        alert('error!');
    }
});
未调用Flask的处理程序，因为请求已在前面被拒绝

同样，ajax无法处理错误，成功处理。 我正在使用Safari9、jQuery 2.4.1和Flask 0.10.1

以下是最简单的工作示例：

app.py：

from flask import Flask, render_template, jsonify, request
import datetime

app = Flask(__name__)

app.config['MAX_CONTENT_LENGTH'] = 32 * 1024


@app.route('/upload/', methods=['POST'])
def upload_handler():
    if 'image' in request.files:
        img = request.files['image']
        return jsonify(name=img.filename, size=0)
    return jsonify(name='no', size=0)


@app.route('/')
def hello_world():
    return render_template('index.html', now=datetime.datetime.now())


if __name__ == '__main__':
    app.run(debug=True)
index.html：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <form id="uploadform" method="POST" action="{{      url_for('upload_handler') }}">
            <input type="file" name="image" >
            <button type="button" id="submit">Upload</button>

            <p>Result Filename:&nbsp;<span id="resultFilename"> here</span></p>
            <p>Result Filesize:&nbsp;<span id="resultFilesize">here</span></p>

            {{ now }}
        </form>

        <script>
        $(function() {
            $('#submit').click(function() {
                event.preventDefault();
                var form_data = new FormData($('#uploadform')[0]);
                $.ajax({
                    type: 'POST',
                    url: "{{ url_for('upload_handler') }}",
                    data: form_data,
                    contentType: false,
                    processData: false,
                    dataType: 'json'
                }).done(function(data, textStatus, jqXHR){
                    console.log(data);
                    console.log(textStatus);
                    console.log(jqXHR);
                    console.log('Success!');
                    $("#resultFilename").text(data['name']);
                    $("#resultFilesize").text(data['size']);
                    $('#uploadform')[0].reset();
                }).fail(function(data){
                    console.log(data);
                    alert('error!');
                });
            });
        });
    </script>

   </body>
   </html>


标题
上传
结果文件名：这里

结果文件大小：此处

{{now}
$（函数（）{
$（“#提交”）。单击（函数（）{
event.preventDefault（）；
var form_data=new FormData（$（'#uploadform'）[0]）；
$.ajax({
键入：“POST”，
url:“{url\u for（'upload\u handler'）}}”，
数据：表格数据，
contentType:false，
processData:false，
数据类型：“json”
}).done（函数（数据、文本状态、jqXHR）{
控制台日志（数据）；
console.log（textStatus）；
console.log（jqXHR）；
console.log（'Success！'）；
$（“#resultFilename”）.text（数据['name'）；
$（“#resultFilesize”）.text（数据['size']）；
$（'#uploadform'）[0].reset（）；
}).失败（功能（数据）{
控制台日志（数据）；
警报（'错误！'）；
});
});
});
如果尝试上载小于32K的文件，它将显示文件名；如果尝试上载大于32K的文件，则不会发生任何情况，但flask将输出带有413代码的日志消息。

尝试将
状态代码添加到
$.ajax（）
设置或
$.ajaxSetup（）
确定错误响应是否返回
413
状态代码


$.ajaxSetup({
  statusCode: {
    413: function(jqxhr, textStatus, errorThrown) {
           console.log(textStatus, errorThrown)
    }
  }
})



flask产生413（实体太大）错误，但在这种情况下，$.ajax（）不会触发任何事件
。你能澄清这句话吗？你是说在这种情况下既不触发成功处理程序也不触发错误处理程序？是的，完全没有发生任何事情：根本没有消息。我做到了，但似乎没有调用该函数：没有消息shown@Xanx在
控制台的
网络
选项卡上的响应头是什么？没有响应-网络选项卡上说正在执行请求，看来这可能需要很多时间time@Xanx如果在
n
秒内未返回响应，请尝试中止请求，以调用
$的
错误处理程序。ajax（）
如果设置超时，则调用错误处理程序。但我觉得很奇怪：为什么它忽略了烧瓶产生的错误？如果我故意用相同的错误代码（413）中止请求，那么它将被处理