基于Ajax提交formdata数据和错误信息展示

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form id="fm">
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-info pull-right"></span>
                    </div>
                {% endfor %}

                <div class="form-group">
                    <label for="id_avatar">头像
                        <img width="60" height="60" id="avatar_img" src="/static/blog/img/default_avatar.jpg">
                    </label>

                    <input type="file" name="avatar" id="id_avatar" class="hidden">
                </div>

                <input type="button" id="reg_btn" class="btn btn-info" value="提交">
            </form>
        </div>
    </div>
</div>

def register(request):
    if request.is_ajax():
        print(request.POST)
        form = RegForm(request.POST)
        response = {‘user‘: None, ‘msg‘: None}
        if form.is_valid():
            response[‘user‘] = form.cleaned_data.get(‘user‘)
        else:
            print(form.cleaned_data)
            print(form.errors)
            response[‘msg‘] = form.errors

        return JsonResponse(response)

    form = RegForm()

    context = {
        ‘form‘: form
    }
    return render(request, ‘register.html‘, context=context)

<script src="/static/blog/js/jquery-3.3.1.js"></script>
<script>
    // 头像预览功能
    $(‘#id_avatar‘).change(function () {   // 图片发生了变化，所以要用change事件
        // 获取用户选中的文件对象
        let file_obj = $(this)[0].files[0];

        // 获取文件对象的路径
        let reader = new FileReader();  // 等同于在python里拿到了实例对象
        reader.readAsDataURL(file_obj);

        reader.onload = function () {
            // 修改img的src属性，src = 文件对象的路径
            $("#avatar_img").attr(‘src‘, reader.result);  // 这个是异步，速度比reader读取路径要快，
                                                          // 所以要等reader加载完后在执行。
        };
    });

    // 基于Ajax提交数据
    $(‘#reg_btn‘).click(function () {
        let formdata = new FormData();
        let request_data = $(‘#fm‘).serializeArray();
        $.each(request_data, function (index, data) {
            formdata.append(data.name, data.value)
        });
        formdata.append(‘avatar‘, $(‘#id_avatar‘)[0].files[0]);

        $.ajax({
            url: ‘‘,
            type: ‘post‘,
            contentType: false,
            processData: false,
            data: formdata,
            success: function (data) {
                if (data.user) {
                    // 注册成功
                } else {
                    // 注册失败

                    // 清空错误信息，每次展示错误信息前，先把之前的清空了。
                    $(‘span.error-info‘).html("");
                    $(‘.form-group‘).removeClass(‘has-error‘);
                    // 展示此次提交的错误信息
                    $.each(data.msg, function (field, error_list) {
                        $(‘#id_‘ + field).next().html(error_list[0]);
                        $(‘#id_‘ + field).parent().addClass(‘has-error‘);  // has-error是bootstrap提供的
                    });
                }
            }
        })
    })

</script>