Django Jquery Form no AJAX request

Question

在阅读了有关类似主题的其他问题后，我仍然不明白这段代码有什么问题。

我正在测试一个使用Jquery Form插件的代码。 我在视图中向模板添加了一个调用，以第一次显示它，以便用户可以选择文件并上传。 但它从不发送 AJAX 请求，因此不会执行视图中的代码部分。 虽然这里没有显示，但jQuery库和jQueryForm插件确实被调用了。

Template:
<form id="uploadForm"  method="post" enctype="multipart/form-data">
                            {% csrf_token %}
        <input id="fileInput" class="input-file" name="upload" type="file">
        {{ form.docfile }}
        <span class="upload-message"></span>
        <input type="submit" value="Upload" />
</form>
<script>
    var message = '';
    var options = {
        type: "POST",
        url: '/upload/file/',
        error: function(response) {
            message = '<span class="error">We're sorry, but something went wrong. Retry.</span>';
            $('.upload-message').html(message);
            $('fileInput').val('');
        },
        success: function(response) {
            message = '<span class="' + response.status + '">' + response.result + '</span> ';
            message = ( response.status == 'success' ) ? message + response.fileLink : message;
            $('.upload-message').html(message);
            $('fileInput').val('');
        }
    };
    $('#uploadForm').ajaxSubmit(options);
</script>

视图：

def upload(request):
    response_data = {}
    if request.method == 'POST':
        if request.is_ajax:
            form = UploaderForm(request.POST, request.FILES)
            if form.is_valid():
                upload = Upload(
                upload=request.FILES['upload']
            )
            upload.name = request.FILES['upload'].name
            upload.save()
            response_data['status'] = "success"
            response_data['result'] = "Your file has been uploaded:"
            response_data['fileLink'] = "/%s" % upload.upload
            return HttpResponse(json.dumps(response_data), content_type="application/json")
        response_data['status'] = "error"
        response_data['result'] = "We're sorry, but kk something went wrong. Please be sure that your file respects the upload conditions."
        return HttpResponse(json.dumps(response_data), content_type='application/json')
    else:
        form = UploaderForm()
        return render(request, 'upload.html', {'form': form})

它在第一次正确调用模板时确实正确调用模板，它显示按钮，它再次执行脚本，但表单无效，因此response_data错误。

我错过了什么？

谢谢，里卡多

Answer 1

您可以尝试使用 API 部分中的示例，只需查看源代码：

$('#uploadForm').ajaxForm({
    beforeSubmit: function(a,f,o) {
        $('.upload-message').html('Submitting...');
    },
    success: function(data) {
        $('.upload-message').html('Done!');
    }
});

和 HTML：

<form id="uploadForm" action="/upload/file/" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
    <input type="hidden" name="MAX_FILE_SIZE" value="100000">
    File: <input type="file" name="file">
    {{ form.docfile }}
    <span class="upload-message"></span>
    <input type="submit" value="Upload" />
</form>

Answer 2

如果您的脚本中没有发送表单数据，它应该如何工作。

var options = {
    type: "POST",
    url: '/upload/file/',
    data: new FormData(document.getElementById('uploadForm')),
    processData: false,
    contentType: false,
    error: function(response) {
        message = '<span class="error">We're sorry, but something went wrong. Retry.</span>';
        $('.upload-message').html(message);
        $('fileInput').val('');
    },
    success: function(response) {
        message = '<span class="' + response.status + '">' + response.result + '</span> ';
        message = ( response.status == 'success' ) ? message + response.fileLink : message;
        $('.upload-message').html(message);
        $('fileInput').val('');
    }
};

Answer 3

您的视图至少有一个问题 - 这个：

if not request.GET:
    return render(request, 'upload.html') 

当request.GET为空时，将阻止进一步执行，这是执行 POST 请求时的情况。