Django 表单在 AJAX 请求上无效（form.is_valide() 返回 False）答案

【问题标题】：Django form not valid (form.is_valide() return False) on AJAX requestDjango 表单在 AJAX 请求上无效（form.is_valide() 返回 False）
【发布时间】：2015-01-12 12:25:58
【问题描述】：

我有一个包含 ImageField 的模型表单，我希望用户能够通过 AJAX 提交图像。

问题是 form.is_valide() 返回 False。当我不使用 AJAX 时，一切似乎都很好。我在类似问题上尝试了几个 SO 答案，但没有运气。

查看（简化版）

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:

            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

HTML

<form id = "form" action="{% url 'photos:index' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

JS/JQuery

 $(document).ready(function(){

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
             // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
        return cookieValue;
    }
var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = '//' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
        // or any other URL that isn't scheme relative or absolute i.e relative.
        !(/^(\/\/|http:|https:).*/.test(url));
    }

    $('#form').submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/',
            type: 'POST',
            data: new FormData($(this)),
            cache:false,
            processData: false,
            contentType: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                alert("yo success");
                alert(data.message);
            }
        });
    });
});

非常感谢我能得到的任何帮助。谢谢

【问题讨论】：

为什么表格无效？在 HttpResponse 失败时将字段错误放入其中可能是个好主意，而不仅仅是“不好”
它说我的表单中的每个字段都是必需的（得到了html，对于form.errors，每个字段都有li，说它是必需的）。
您检查过request.POST 中的实际内容吗？它要么是没有在表单中输入的值（在这种情况下我会责怪FormData），要么是数据存在但有不同的prefix。
@GonzaloDelgado 我已将 contentType 更改为 'application/x-www-form-urlencoded;charset=utf-8' ，这似乎是使用 FormData 的方式，现在它发送文本-类似字段，但文件（图像）为空。
@GonzaloDelgado 好的，在 contentType 更改期间，我将 DataForm 部分更改为 $(this).serialize()。当数据设置为 $(new DataForm($(this)) 并将 conteType 设置为 application/x-www-form-urlencoded;charset=utf-8 时，在请求中我有 FormData 对象，其中包含所有表单字段并且它们不为空. 但不知何故，我仍然让 form.is_valid() 为 False。

标签： jquery python ajax django django-file-upload

【解决方案1】：

当 Django 表单被传递数据时，此时它被视为“绑定”，调用 form.is_valid() 将对绑定到表单的数据进行全面清理并设置实例属性 self._errors。从 self._errors 输出数据可能会为您提供向表单提交有效数据所需的信息。

我的建议是调试源代码...

def index(request):

    if request.method  == 'POST':
        form = UploadForm(request.POST, request.FILES)
        if form.is_valid() :
            description = form.cleaned_data['description']
            photo = form.cleaned_data['photo']
            return HttpResponse(json.dumps({'message':"some success msg"}))
        else:
            # output form.errors here and figure out what fields aren't passing validation
            return HttpResponse(json.dumps({'message':'not ok'}))
    else:
        form = UploadForm()
    return render(request, 'photos/index.html', {'form':form})

【讨论】：

我做到了:) 它告诉我所有字段都是空的。
这里也一样。不过感谢 Kevin 的调试建议

【解决方案2】：

解决办法是手动填充FormData对象

JS/JQuery

$('#form').submit(function(e){
        e.preventDefault();

        //fill FormData with form fields

        var data = new FormData($(this));
        data.append("photo", $("#id_photo")[0].files[0]);
        data.append("description",$("#id_description").val());

        $.ajax({
            url:'/',
            type: 'POST',
            data: data,
            cache:false,
            processData: false,
            contentType: false, 
            //part related to Django crsf token
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                 // Send the token to same-origin, relative URLs only.
                 // Send the token only if the method warrants CSRF protection
                 // Using the CSRFToken value acquired earlier
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
            },
            success: function(data){
                var parseData = $.parseJSON(data);
                console.log(parseData.message);
            }
        });

    });

【讨论】：