Django + Ajax |文件上傳|服務器無法識別Ajax請求

Question

我正在嘗試使用ajax with Django實現文件上傳ajax with Django但面臨一些問題。

當用戶在選擇文件並提交表單后嘗試上傳文件時，根據我的理解，應該使用POST方法將ajax請求發送到服務器，但在我的情況下，正在向服務器發出POST請求，但服務器無法將其識別為ajax請求，瀏覽器將重定向到http://<server>:<port>/upload/ ，此頁面上的內容如下所示。

{"status": "error", "result": "Something went wrong.Try Again !!"}

Django版本：1.6.2

Python版本：2.7.5

另外，在Django Development Server上進行測試。

views.py

def upload(request):
        logging.info('Inside upload view')
        response_data = {}
        if request.is_ajax():
                logging.info('Is_AJAX() returned True')
                form = UploaderForm(request.POST, request.FILES)

                if form.is_valid():
                        logging.info('Uploaded Data Validated')
                        upload = Upload( upload=request.FILES['upload'] )
                        upload.name = request.FILES['upload'].name
                        upload.save()
                        logging.info('Uploaded Data Saved in Database and link is %s' % upload.upload)

                        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'] = "Something went wrong.Try Again !!"

        return HttpResponse(json.dumps(response_data), content_type='application/json')

模板

<form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
<input id="fileInput" class="input-file" name="upload" type="file">
<input type="submit" value="Post Images/Files" />
</form>

Javascript 1：

$('#uploadForm').submit(function(){

        var formData = new FormData($(this)[0]);
        $.ajax({
                url: '/upload/',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                alert(data)
                },
                cache: false,
                contentType: false,
                processData: false
        });
        return false;
});

Javascript 2

var options = {
      url: '/upload/',
      type: "POST",
       error: function(response) {
               alert('Something went Wrong. Try Again');
        },
        success: function(response) {
            if ( response.status == 'success' ) {
              alert('success');
             }
        }
};

$('#uploadForm').ajaxSubmit(options);

題：

1）為什么Django無法識別ajax請求和request.is_ajax()值始終為False 。

2）即使服務器無法識別ajax請求，為什么我的瀏覽器會被重定向到另一個頁面？

這里還有另一個類似的問題，但沒有結果。

Answer 1

這適合我。 你需要一個jquery.form.js

$("#uploadForm").submit(function(event) {
    $(this).ajaxSubmit({
        url:'{% url upload_file %}',
        type: 'post',
        success: function(data) {
            console.log(data)
        },
        error: function(jqXHR, exception) {
            console.log("An error occurred while uploading your file!");
        }
    });
    return false;
});

下面是類似的問題在這里的答案。

Answer 2

確保javascript代碼阻止

$('#uploadForm').submit(function(){

    var formData = new FormData($(this)[0]);
    $.ajax({
            url: '/upload/',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
            alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
    });
    return false;
});

在頁面上的DOM中的uploadForm html表單后加載。 在您的情況下，您似乎嘗試將提交處理程序與尚未加載的表單元素綁定，因此當您單擊時，它會發送簡單的POST請求。

Answer 3

1） 為什么is_ajax（）無法正常工作？ 你有沒有包含JQuery表單插件（ jquery.form.js ）？ ajaxSubmit()需要該插件。

看看http://jquery.malsup.com/form/

如果已經完成，您可以查看HTTPRequest對象

Django Documentation說HttpRequest.is_ajax()如果請求是通過XMLHttpRequest發出的，則返回True。 如果你使用一些javascript庫來發出ajax請求，你就不必為這件事煩惱了。 您仍然可以驗證“ HTTP_X_REQUESTED_WITH ”標頭，看看Django是否收到了XMLHttpRequest 。

2）為什么頁面重定向？

正如我上面所說，處理ajax請求及其回調需要JQuery表單插件。 另外，對於ajaxSubmit（），你需要覆蓋$（＃uploadForm）.submit（）

 $('#uploadForm').submit( function (){
     $(this).ajaxSubmit(options);
 return false;
 });

希望這有用:)