在Django中提交表单后停止页面重定向

时间:2017-09-19 22:59:08

标签: python ajax django python-2.7 django-forms

我正在使用django,我创建了一个应用程序,我想上传一个保存在特定位置的zip文件(此时我的django服务器是localhost) 我有以下代码正常工作:

这是我的HTML模板:

<form id="saveZipFile" enctype="multipart/form-data" action="" method="post">
    {% csrf_token %}
    <input type="file" name="docfile" id="docfile">
    <input type="submit" id="upload-button" value="Upload">
</form>

这是我的forms.py:

class UploadFileForm(forms.Form):
    docfile = forms.FileField()

这是我的views.py:

def handle_uploaded_file(f):
    with open('uploaded_zip.zip', 'wb+') as destination:
        for chunk in f.chunks():
            destination.write(chunk)


def upload_file(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            handle_uploaded_file(request.FILES['docfile'])
            return HttpResponse()
    else:
        form = UploadFileForm()
        return HttpResponse()

urls.py:

urlpatterns = [
    url(r'^upload_file/$', views.upload_file, name='upload_file'),
]

但最后,网址会更改为/upload_file - 这是我理解的正确 - 而且该网页为空(因为我返回空HttpResponse

我正在尝试构建一个单页面应用程序,这种重定向将我的网页的整个状态抛到窗外。

有没有什么方法可以进行AJAX调用而不是使用django表单?

谢谢!

修改

我添加了一个获取上传文件的ajax调用并将其发送到django视图。

AJAX电话:

var selectedFile = $('#docfile').files[0];

var fd = new FormData();
fd.append("file", selectedFile);
$.ajax({method: 'POST', 
        url: 'upload_file',
        data: fd, 
        headers: {'Content-Type': undefined, 
                  'X-CSRFToken': getCookie('csrftoken')
        },
        cache: false, 
        processData: false})
        .done(function(data) {
            alert(data)
        });

但是在我打印request.POST的视图中,我得到了这个混乱(以及很多很多行):

<QueryDict: {u'\x00\x00userapp/.git/objects/0e/34e20fc7131238973f102fe6d2d7fe102d12f4UT\x05\x00\x03\ufffd': [u'\xc0Yux\x0b\x00\x01\x04\xe8\x03\x00\x00\x04\xe8\x03\x00\x00PK\x01\x02\x1e\x03\n\x00\x00\x00\x00\x001\x852K\x00\x00\x00\x00\x00\x00\

1 个答案:

答案 0 :(得分:0)

您应该使用ajax,从表单中检索数据,发出请求并返回false,这样可以防止重定向发生。看起来应该是这样的:

$(function() {
    $('form').submit(function() {
        $.ajax({
            type: 'POST',
            url: 'form-submit.php',
            data: { name: $(this).name.value, 
                    surname: $(this).surname.value }
        });
        return false;
    }); 
})