如何实现Ajax错误处理函数，在数据为空时展示Missing Data!提示

要实现错误提示的显示，有两种常用方式，下面分别说明：

方法一：修改后端状态码，用Ajax错误回调处理 #

首先调整你的Flask后端代码，当数据缺失时返回400 Bad Request状态码（这符合HTTP规范，表明客户端请求存在问题）：

from flask import request, jsonify

@app.route('/index', methods=['GET', 'POST'])
def test_post():
    # 用request.form.get()替代直接取值，避免只传单个字段时抛出KeyError
    theName = request.form.get('name')
    theAge = request.form.get('age')
    if theName and theAge:
        return jsonify({'output':'Your name is '+theName+' , and your age is '+theAge+' , right?'})
    # 返回错误信息+400状态码，让Ajax识别为错误请求
    return jsonify({'error': 'Missing Data!'}), 400

然后修改前端Ajax代码，添加.fail()回调捕获错误响应，同时在页面中新增一个用于显示错误的元素（比如<div id="error" style="color:red; display:none;"></div>）：

<script>
    $(document).ready(function () {
        $('#form').on('submit', function (e) {
            // 清空之前的提示内容
            $('#output').hide().text('');
            $('#error').hide().text('');
            
            $.ajax({
                data: {
                    name: $('#name').val(),
                    age: $('#age').val(),
                },
                type: 'POST',
                url: '/index'
            })
            .done(function (data) {
                $('#output').text(data.output).show();
            })
            .fail(function (xhr) {
                // 解析错误响应的JSON数据并显示
                var errorData = xhr.responseJSON;
                $('#error').text(errorData.error).show();
            });
            
            e.preventDefault();
        });
    });
</script>

方法二：不修改后端，在成功回调里判断错误字段 #

如果不想调整后端状态码，也可以直接在.done()回调里检查返回数据是否包含error字段：

<script>
    $(document).ready(function () {
        $('#form').on('submit', function (e) {
            $('#output').hide().text('');
            $('#error').hide().text('');
            
            $.ajax({
                data: {
                    name: $('#name').val(),
                    age: $('#age').val(),
                },
                type: 'POST',
                url: '/index'
            })
            .done(function (data) {
                if (data.error) {
                    $('#error').text(data.error).show();
                } else {
                    $('#output').text(data.output).show();
                }
            });
            
            e.preventDefault();
        });
    });
</script>

补充说明 #

页面里需要添加对应的显示元素，建议放在表单下方：

<div id="output" style="display:none;"></div>
<div id="error" style="color:red; display:none;"></div>

内容的提问来源于stack exchange，提问作者Satellite_Chao